CSS: Media query is invoked when it clearly should not

Question

I'll make it simple:

This is the only code in my sample project's entire scope that turns the background to red.

@media only screen and (min-width: 768px) and (orientation: portrait) {
        background: red;    
    }

I cannot explain why I'm seeing a red background in this Chrome responsive simulator when the min-width is clearly below 768px:

show us a (non)working example of this actually happening. (snippet, or link to site) — Scott Weaver, Jun 27 '19 at 21:15
This answer should solve your problem (meta viewport tag): https://stackoverflow.com/a/18500871/7497763 — cyr_x, Jun 27 '19 at 21:22

score 2 · Accepted Answer · answered Jun 27 '19 at 21:41

2

I can't replicate the issue. Given you said it is the only code, shouldn't there be a CSS class selector?

@media only screen and (min-width: 768px) and (orientation: portrait) {
    .someClassName {
      background: red;    
    }
}

answered Jun 27 '19 at 21:41

John

3,716
2
19
21

or (probably) not a class, but `body` – Johannes Jun 28 '19 at 23:57

score -1 · Answer 2 · answered Jun 28 '19 at 22:03

-1

The answer is that I was using min-width instead of using min-device-height -- Once I switched to device-height vs. height - things started working.

answered Jun 28 '19 at 22:03

JasonGenX

4,952
27
106
198

Regarding device-height - See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-height – John Jun 29 '19 at 00:41

CSS: Media query is invoked when it clearly should not

2 Answers2