Why is there an offset in media queries?

Question

I was using Bourbon Neat to create some responsive layouts. However, I found out that the media query that I use was offset by around 70px.. I set a breakpoint of 640px for tablets (as shown in the CSS inspector

CSS inspection

However, when i try to adjust the screen, chrome tells me that the media query is only applied when the window is at ~580px... I was very confused why this is and i have no idea where the problem may lie.

Thanks for helping!

Please provide code. Did you try another browser? – Aibrean Jul 25 '14 at 17:34 — Aibrean, Jul 25 '14 at 17:34
Are you zoomed into the page at all? – LoveAndCoding Jul 25 '14 at 17:34 — LoveAndCoding, Jul 25 '14 at 17:34
Apparently I did.. Thanks @Ktash – Chris Yeung Jul 25 '14 at 17:40 — Chris Yeung, Jul 25 '14 at 17:40

LoveAndCoding · Answer 1 · 2014-07-25T18:17:04.333

For pixel based media queries, zooming in and out can cause them to break at different points. Instead of using pixel based values, if you use em or rem, you can have a bit more control if the user does decide to zoom. When they zoom, the text will change size, which can cause the breakpoints to activate (and make sure your layout doesn't look odd).

Note that converting to ems should be pretty easy. The value of em in pixels is equal to the font-size value of the element in question (in this case the root) in pixels. By default this will be 16px, so dividing your values by 16 should get you an approximation of your em value.

Why is there an offset in media queries?

1 Answers1