max-width media query not applying to max value
I have an odd issue where my max-width media query; eg:
@media (max-width: 1023px) is working on everything below <1022px, but at 1023px, it doesn't apply.
I have checked dev tools and confirmed this issue. There does not appear to be another media query (eg: @media (min-width: 1023px)) being applied.
I know my issue is impossible to diagnose without code, but does anyone know general reasons why this could be happening? I read MDN and it should be applying <=1023.9 Replies
Potentially helpful screenshots from devtools:
1022px browser width (first image)
1023px browser width (second image)
Very strange!
Is there any possibility some sort of non-integer display scaling is leading to rounding errors in the browser?
What happens if you go sub-pixel? i.e. 1023.01px or 1023.99px or something in between?
Hey @Jacord, thanks for the response! I tried
1023.01 and 1023.99 based off your suggestion - .01 had the same behavior and .99 made it behave like it was a media (max-width: 1024px) 🤔
I just tried 1023.5 to test and that actually fixed the issue lol"I don't know why it works, but it works"
😂 Thanks a ton, I'll have to check out display scaling issues because I've never heard of that stuff before. I always assumed whatever was shown as the width/height in responsive mode was what it said it was
Me neither to be honest! I was just wondering if it might have played a part... I bet it's something simpler than that, but if it's working the way you want it to for now hopefully it can spare you some headache until the answer shows up.
I appreciate you! 🙂
Interesting write up here: https://www.stevefenton.co.uk/blog/2023/05/unintentional-media-query-gaps/
Doesn't really apply to my case, but might be part of the pixel rendering issue.
That article links to this article: https://alistapart.com/article/a-pixel-identity-crisis/ (which I'd love to read but frankly can't be assed atm 😂)
That was an interesting read... much of it lines up with my existing frustrations with what has happened to reliable ole pixel.
I'll have to read it after work then 👀