Beginner MDN curriculum CSS example not working in Firefox 158.0 (64-bit)

MDN
,
1

Hello,

I’m currently at the section “Getting started with CSS” where they teach about at-rules.

I’m trying the following code example:

@media (width < 550px) {
  body {
    background-color: rgb(179, 255, 0);
  }
}

@media (width >= 550px) {
  body {
    background-color: rgb(255, 153, 0);
  }
}

Warning: Flashing lights/colors in the gifs!

Seems to work as expected with Visual Studio Code’s “Live Preview” extension.

VSCode Live Preview GIF

Recording 2026-10-16 210310

Does not work with Firefox’s “Responsive Design Mode”.

Responsive Design Mode GIF

responsive_design_mode

My question is: Why doesn’t it work with Firefox? Is this a bug or an intended behavior?

I tested this with a couple of Chromium based browser and it worked with those.

2

Your CSS looks correct, and Firefox has supported the range syntax (width < 550px) since version 63, so this isn’t a Firefox bug. The most likely cause is Responsive Design Mode’s touch simulation: when it’s on, Firefox behaves like a mobile browser, and a page with no viewport meta tag gets laid out at a default width of about 980px, so the (width < 550px) rule never matches no matter how narrow you make the frame. Add this line inside the of your HTML file: and reload. Alternatively, turn off the touch simulation toggle in the Responsive Design Mode toolbar and the page should behave like it does in the VS Code preview. If you still see no change, check in the Inspector’s Rules panel that the @media block is listed under body, which tells you whether the query matched.

3

Thank you @Novastart for the reply!

The problem seemed to disappear overnight!

Maybe it was a simple mistake on my end (forgot to CTRL + F5 or something simple like that) or maybe Firefox had a temporary hiccup. Either way, the CSS is now working in a regular window and also in a Responsive Design Mode.