Question

I have been using media queries for the first time, and things going well, but seem to have encountered a strange problem.

here is my css:

@media only screen and (min-width:481px) and (max-width:768px) { /* tablet portrait */
   css here
}

@media only screen and (min-width:321px) and (max-width:480px) { /* mobile landscape */
   css here
}

@media only screen and (max-width:320px){ /* mobile portrait */
   css here
}

Everything works fine in Chrome, and the stylesheets are implemented as expected. In firefox, hoever, the last stylesheet (max-width:320px) isn’t picked up.

I’ve done alot of searching and can’t find anything similar.

Very appreciated if anyone has any advice…

Answer 1

Super late here, but just change the

@media only screen and (max-width:320px){ /* mobile portrait */
    css here
}

to

@media only screen and (max-width:768px){ /* mobile portrait */
    css here
}

For some reason, firefox won’t recognize anything below 480px, so if we change the 320px to 768px it will act as the default value, while the more precise queries will override it.

Edit: Make sure the overriding element are BELOW the iphone’s in the CSS.