CODEWITHSUNDEEP
htmlcss
Master Of Disaster
Master Of Disaster

Reputation: 387

Webpage is responsive in chrome's inspect but fails on real phone

I'm facing an issue with my webpage: I have a webpage which I want to be responsive on mobile phones.

I tried

<meta name="viewport" content="width=device-width, initial-scale=1.0">

and all CSS attributes like width:100% and max-width and so on
And the issue is: when I use chrome's inspect to simulate webpage on phone, it shows up correctly but when I access through real mobile phone, it fails (It shows up like a desktop version, No responsiveness)

HTML Codes

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Love calculator | Home</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="wrapper">
        <div class="content">
            <h1><img src = "./img/logo1.png" alt = "Calculate your love!" class="img" style = "border: medium none ;" /></h1>
        </div>


        <form method="POST" enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
        <div class="form">
            <div class="top-form">
                <div class="inner-form">
                    <div class="label">Your Name</div>
                    <input type="text" placeholder="Your name" required name="firstname">
                </div>
                <div class="inner-form">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                </div>
                <div class="inner-form">
                    <div class="label">Partner's Name</div>
                    <input type="text" placeholder="Partner's Name" required name="lastname">
                </div>
            </div>
            
            <div class="submitbtn">
            <input type="submit" value="" name="submit" style="border: medium none ; background: transparent url(img/calculate.png) repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 131px; height: 52px;">
        </div>
        <div class="bottom-form">
                <div id="instructions"><img src="./img/how-it-works.png" alt="how does it work?" class="img" /></div>
            </div>
        </div>
    </div>

</form>
</body>
</html>

STYLE.CSS

*{
    margin: 0;
    padding: 0;
    user-select: none;
}
body{
    background-image: url(img/bg-love.jpg);
    background-repeat: no-repeat;
}
.wrapper{
    width: 100%;
    max-width: 680px;
    margin: 10px auto 0;
    padding: 20px;
    box-sizing: border-box;
}
.content{
    text-align: center;
    width: 100%;
}
.submitbtn{
    width: 100%;
}
.content h1{
    letter-spacing: 1px;
}
.form{
    width: 100%;
    margin: 25px 0;

}
.top-form, 
.middle-form,
.bottom-form{
    width: 100%;
    min-height: 65px;
    margin: 30px 0;
    overflow: hidden;
}
.form input[type="text"],
.form textarea{
    padding: 15px 5px;
    box-sizing: border-box;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 2px;
    outline: none;
    transition: all 0.2s ease;

}
.form input:focus,
.form textarea:focus{
    border-color: #4ca1af;
    box-shadow: inset 0 1px 1px rgba(0,0,0, 0.0125),
        0 0 8px rgba(76,161,175,0.5);

}
.form .label{
    margin-bottom: 5px;
    text-transform: capitalize;
    color: white;
    font-weight: bold;
    font-family: sans-serif;

}
.top-form .inner-form{
    width: 29.9%;
    float: left;
    margin-right: 5%;
}
.top-form .inner-form:last-child {
    margin-right: 0;
}

.middle-form{
    clear: both;
}
.bottom-form textarea{
    height: 60px;

}
.btn{
    background: #4ca1af;
    width: 200px;
    padding: 10px 0;
    border-radius: 2px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 5px;
    cursor: pointer;
}
::-moz-input-placeholder{
    text-transform: capitalize;
}
::-ms-input-placeholder{
    text-transform: capitalize;
}
#targetDiv{
    align: center;
    z-index: 4;
    color:   #FFFFFF;
    width:   133;
    font-size: 28px;
    }

@media screen and (max-width: 460px){
    .img {
        width: 100%;
    }
    .wrapper{
        margin: 25px auto 0;
    }
    .top-form .inner-form{
        width: 100%;
        margin: 5px 0;
    }

}

Why could this happen? can background image affect responsiveness!?

Upvotes: 1

Views: 2031

Answers (2)

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

You can add shrink type in the content of viewport like the following

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

or just use one of following media query for smartphone

portrait

/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
 /* styles */
}

landscape

/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
 /* styles */
}

both portrait and landscape

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
 /* styles */
}

And if the problem is still there try to alter many possible html elements inside the media query in the way that makes sense and check your browser as well or try another smart phones.

Or you can try another way using JavaScript if you know some.

in JavaScript there is function called window.matchMedia() which helps you to work with media queries in JavaScript and the following is the syntax

if (window.matchMedia('only screen and (max-width: 480px)').matches) {
// style here
}

Upvotes: 2

Anis R.
Anis R.

Reputation: 6912

Can background image affect responsiveness!?

Yes, it can. Consider using the background-size property on your affected div:

body{
    background-image: url(img/bg-love.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

This is only one of the possible issues though. Try adjusting that and see if anything improves.

Upvotes: 1

Related Questions