CODEWITHSUNDEEP
iphonecssipadmobilemedia
Ste77
Ste77

Reputation: 676

@media min-width not being recognised by firefox 8

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...

Upvotes: 1

Views: 2270

Answers (2)

sarah3585
sarah3585

Reputation: 637

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.

Upvotes: 1

Chad Humphrey
Chad Humphrey

Reputation: 36

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.

Upvotes: 2

Related Questions