Question

I’m creating a responsive layout that works great on most formats, except smartphones with a 320px width. I’ve used media conditionals both in the CSS and a separate stylesheet, and neither seem to work, almost as if the device is ignoring the conditional code.

My original CSS looks like this (for devices 480px and higher):

#logo
{
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height: 117px;
background-image:url(../images/logorepeat.png);
background-position:0px 26px;
background-repeat:repeat-x;
z-index:50;
}

#landscape
{
position:relative;
margin-top:-27px;
margin-left:auto;
margin-right:auto;
padding-top:45px;
text-align:center;
width:100%;
height:120px;
background-image:url(../images/plated2.jpg);
background-repeat:repeat-x;
background-color:#efebe5;
z-index:40;
}

Because I do not need the repeating background in devices at 320px (such as the iPod Touch), I’ve removed it in this callout for the device (as well as moved the div above it up):

@media screen and (max-width: 320px)
{

#logo
{
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height: 117px;
z-index:50;
}

#landscape
{
position:relative;
margin-top:-45px;
margin-left:auto;
margin-right:auto;
padding-top:45px;
text-align:center;
width:100%;
height:120px;
background-image:url(../images/plated2.jpg);
background-repeat:repeat-x;
background-color:#efebe5;
z-index:40;
}

}

Any suggestions?

Thanks! 🙂

Answer 1

I’ve answered my own question! I just put the iphone stylesheet I made as the default sheet and linked to the media query stylesheets in the head of my HTML in smallest to largest order. 🙂