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.

One thought on “These are not the widths you were looking for – CSS media query max-width”

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s