0

When inspecting media queries in chrome inspector they are not firing at the correct screen size but rather 1 pixel off.

For example I have following query:

@media (max-width: 767px){
    .hide-mobile {
        display: none;
    }
}

When I open Chrome inspector -> toggle device toolbar -> set the device to "responsive" and enter 767px device width, the element is not hidden. It is hidden if I set the device width to 766px.

My best guess is, that chrome emulates device width to 767.xyz pixels rather than 767px. Is this correct?

Arian
  • 3,183
  • 5
  • 30
  • 58
  • 1
    Yes there are (or can be) decimals; i believe bootstrap also uses decimals in their cutoffs. That said though, writing media queries to target sizes exact enough that a few pixels matter, seems like a bad idea (or waste of time). – Raxi Jan 02 '22 at 21:47
  • 1
    It's about curiousity for me. I just tested it in Mozilla and device width seems off there too, not firing the query at 767px device width. – Arian Jan 02 '22 at 21:59
  • @arket can you give us a link so we can test on our side, I cannot reproduce the issue maybe something else in the CSS create the issue. – Ben Souchet Jan 02 '22 at 22:01
  • i just checked, and bootstrap offsets their `max-width` queries with `-0.02px` compared to their integer `min-width` queries. they use `@media (min-width: 1400px) { ... }` vs `@media (max-width: 1399.98px) { ... }`. I don't see any particular reasoning for it, but i'm sure if you're really interested you could locate the relevant commit on github and find out. – Raxi Jan 02 '22 at 22:36
  • 1
    Lot of good info in this SO answer : https://stackoverflow.com/a/60311147/10797718 – Ben Souchet Jan 02 '22 at 22:57
  • Thank you but its not about best practices but inspector behavior on custom screen widths and not firing breakpoints correctly. – Arian Jan 04 '22 at 04:03

0 Answers0