Media query max-width: 767px is not applied even though the width is 767px

Question

Here is codesandbox link: https://codesandbox.io/s/767px-problem-u9temt?file=/style.css

I have made a CSS query rule:

@media screen and (max-width: 767px) {
  div {
    display: none;
  }
}

which should mean that the div will be gone if device width is 767px or lower, right? However, if the width is exactly 767px it is still there. With 766px it disappears as it should.

Here's screenshot: I am using Window 10. The problem persists in both chrome 104.0.5112.81 and Firefox 103.0.2

I've found this answer Media query when max-width is set to 767px, saying that one could try setting query to max-width: 767.5px which somehow works. I went further and tried 767.2 which also works but 767.1 doesn't. What is going on? Is this a bug?

I have a feeling that width of every page is not integer and, in fact, has some fraction part to it which is not shown to us. I cannot explain it otherwise.

@DeanVanGreunen thanks but i checked and there's no scrollbar — Andrew Slock, Aug 16 '22 at 13:42
This is just a rounding "error" in browsers. I would not worry about this unless you have a very specific case where that div needs to be hidden at 767px and lower. You could try using `em`, `rem` values, which may round better for the media query. In fact, your codesandbox works as expected in FF for me. os 12.4, FF 104.0b9 — disinfor, Aug 16 '22 at 14:02

score 0 · Answer 1 · answered Aug 16 '22 at 14:39

0

Try replacing the "px" with "em"

@media screen and (max-width: 46em) {
  div {
    display: none;
  }
}

answered Aug 16 '22 at 14:39

Hlabi

51
2

Thanks, I guess this makes sense. But what if i were to use some tools like bootstrap and wanted to match my layout breakpoints in em units with theirs written in pixels? Users might have their own font settings, which means the layout will be inconsistent among different users, right? – Andrew Slock Aug 16 '22 at 15:46

Media query max-width: 767px is not applied even though the width is 767px

1 Answers1