twitter/bootstrap — Issue #1531: Overlapping media queries when width == 768px
Author: makeusabrew
Created: 2012-02-01 17:33:45+00:00
State: open

Hi folks - first of all great job with the 2.0 release :)

Apologies if this is a duplicate, had a look through (I know there are a lot of new tickets) but couldn't find anyone who'd reported this issue.

When you have your browser width at *exactly* 768px wide (e.g. iPad in portrait mode), two media queries in the responsive css file overlap: those targetting ```max-width:768px``` and ```min-width:768px```. The net result of this is that whilst the max-width query sets ```.row { margin-left:0 }``` this is overridden by the next query which re-instates ```margin-left:-20px```.

This means that when viewing a page at exactly 768px wide, the content suddenly butts right up against the left hand side of the screen.

I haven't submitted with a PR with a fix as I'm not sure what the most graceful solution is, so I've temporarily worked around it by adding my own rule for an exact width of 768px and setting ```margin:0```.

Cheers!

Nick