CSS Media Queries Not Applying On iPhone

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!

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.

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?

Try this,


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



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