The responsive design in Firefox Browser 12.0 is incorrect. Below my settings:

Enable the responsive.custom.css file: enabled
Mobile first: enabled

responsive.custom.css:

/* Smartphone portrait */
@media only screen and (max-width:320px) {
  body {
    background-color: blue;
  }
}
/* Smartphone landscape */
@media only screen and (min-width:321px) and (max-width:480px) {
  body {
    background-color: green;
  }
}
/* Tablet portrait */
@media only screen and (min-width:481px) and (max-width:768px) {
  body {
    background-color: yellow;
  }
}
/* Tablet landscape */
@media only screen and (min-width:769px) and (max-width:1024px) {
  body {
    background-color: orange;
  }
}
/* Standard layout */
@media only screen and (min-width:1025px) {
  body {
    background-color: red;
  }
}

IE 9.0.8.112.16421 - OK
Safari Windows 5.1.7 (7534.57.2) - OK
Chrome Windows 19.0.1084.52 - Browser window can be set not less than 373px wide. Error in the Chrome browser?

Firefox Windows 12.0 - The colors blue (max-width: 320px) and green (min-width: 321px and max-width: 480px) does not appear. The background is yellow.

Comments

Jeff Burnz’s picture

Category: bug » support
Status: Active » Closed (works as designed)
Anonymous’s picture

Thank you Jeff, you're right. If I disable the navigation menu in firefox, then the output of the media-queries is correct.

Jeff Burnz’s picture

Yep, its a bit of a pain! I disable nearly everything and run Firebug on a separate monitor entirely.