Browser only responsive HTML page

Asked

Viewed 115 times

0

I created a responsive html page, to run mainly on smartphones. However, on portable devices, in vertical position (standing), the background image does not "resize". Already in the browser, if I decrease the window to the maximum ("imitating" the size of the smartphone), works normally.

Html:

<html>
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

<div class="wrap">

    <div class="content">

        <div class="logo">
            <h1><img src="images/bg2.png"/></h1>

        </div>


        <center>
        <div >
        <a href="http://infasstec.com.br/midia"><img src="images/midia_video.png"/></a>
        <a href="http://infasstec.com.br/midia"><img src="images/midia_revista.png"/></a>

            </div>
            </center>
     </div>
    </div>  
</div>

CSS:

@media only screen and (max-width: 768px)
{
.wrap {
width: 80%;
}   
.logo img {
width: 315px;
}
}
@media only screen and (max-width: 640px)
{
.wrap {
width: 85%;
}   
.logo {
padding: 1% 1% 12% 1%;
}
.buttom {
width: 515px;
}
.logo img {
width: 300px;
}
}
@media only screen and (max-width: 480px)
{
.wrap {
width: 90%;
}   
.logo {
padding: 1% 1% 12% 1%;
}
.buttom {
width: 440px;
}
/***/
.logo span {
font-size: 1.6em;
}
.logo img {
width: 270px;
}
}
@media only screen and (max-width: 320px)
{
.wrap {
width: 90%;
}   
.logo {
padding: 1% 1% 12% 1%;
}
.buttom {
width: 290px;
}
/***/
.logo span {
font-size: 1.4em;
}
.logo span img {
vertical-align: middle;
}
.logo img {
width: 200px;
}
html css responsive-layout

  • This is because the browser does this job for you.

  • The problem is in the condition of your @media queries. You put the condition only screen, IE, your mobile will disregard these blocks. This is why your desktop browser renders normally and on mobile nothing happens.

  • @Oeslei thanks for the reply! Can help me on how should the code to work?

  • @Renesá added one more answer showing how to fix the problem. I hope it helps =)

1 answer

1


The problem is in the condition of your @media queries. You put the condition only screen, IE, your mobile will disregard these blocks. This is why your desktop browser renders normally and on mobile nothing happens.

To fix the problem just remove all the only screen of its conditions. For example, in the first @media query you have is like this:

@media only screen and (max-width: 768px)

And it should stay that way:

@media (max-width: 768px)

Browser other questions tagged html css responsive-layout

You are not signed in. Login or sign up in order to post.