...

View Full Version : CSS Media Queries Not Applying On iPhone



CSSNoob7
02-18-2012, 06:28 PM
Hi,

I've got the following media queries:



@media all and (min-width: 800px) {
#states{width: 800px; margin:0 auto;}
#states1{float: left; align: center;}
#states2{float: left; align: center;}
#states3{float: left; align: center;}
#states4{float: left; align: center;}
#states5{float: left; align: center;}
#little-screen{display: none;}
#small-line-break{display: none;}
}

@media all and (max-width: 800px) {
#ImageMap_1_1163747142 {display: none;}
#big-screen{display: none;}
}


When on the iPhone I want the max-width query to take effect. However, the min-width query does instead! Help!

curtinj
02-19-2012, 01:57 AM
I just started using media queries, I'm only using max-width, maybe you can use max and min, but not sure. But I did find out through trial and error that order does matter. For example, I have:
@media screen and (max-width: 750) {
.....
}
@media screen and (max-width: 480) {
.....
}
Reversing it with 480 first caused problems.

CSSNoob7
02-19-2012, 02:35 PM
I just started using media queries, I'm only using max-width, maybe you can use max and min, but not sure. But I did find out through trial and error that order does matter. For example, I have:
@media screen and (max-width: 750) {
.....
}
@media screen and (max-width: 480) {
.....
}
Reversing it with 480 first caused problems.

Changing the two around made no difference - thanks for the suggestion though.

Any other advice from anyone?

CaptainB
02-20-2012, 08:16 AM
Try this,



@media only screen and (max-width : 800px) {
Your css..
}




@media only screen and (min-width : 800px) {
Your css..
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum