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.