@media min-width not being recognised by firefox 8

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.

Answer 2

Just to add my experience to this; I was having the same issue but it turned out disabling the Firebug addon made it behave as it should. I'm using FF 15 (mac). Firebug 1.10.03

I suggest disabling all addons at first to see if it works, then turn them back on one by one.