These are not the widths you were looking for – CSS media query max-width

Today I encountered something very unexpected. I was using basic CSS media queries.

@media (max-width:1205px) {

[role=main] > .row
        padding-left: 8px;

And I have Firebug open because my rows do not have padding-left applied. Firebug is clearly telling me the width of HTML is 1199px well under 1205px.

At this point I’m outright stumped. I copy my CSS outside the media query thinking my selector usage is somehow faulty, and it works fine.

I take to the googles and locate issue with CSS media queries(scrollbar) on stackoverflow. This question acknowledges that browsers treat the scrollbar differently for whether it’s included in the width of the viewport. So when Firebug was reporting 1199px for the width of <html> it was not adding 15px for the scrollbar for a total of  1214px greater than my max-width.

these are not the widths you were looking for

The solution to this problem is mqGenie. Effectively this is a polyfill that normalizes browsers behavior in regards to scrollbars and updates your media queries to account for the scrollbar width if neccessary. It likely has the caveat that it will only work on stylesheets that are served inside the same origin policy.