CSS media query ignored by Chrome engines

Question

I have a stylesheet, which is essentially the following:

.mainwindow {
    .popup {
        background: black;
    }
}

@media screen and (max-width: 640px){
    .mainwindow {
       .popup {
            background: red;
        }
    }
}

It works perfectly in Firefox, IE and Edge, but not in Chrome, Brave or Electron.

Yes, I tried to clear the browser cache. It didn't help.

To add to the mystery, in Electron the red background flashes for a split second when starting up, then it turns to black.

Answer 1

Do you have this in the head

<meta name="viewport" content="width=device-width,initial-scale=1">

Otherwise if you are zoomed in that can stop responsive behaviour