Subtitled: the importance of the @screen-__-max variables

While testing a design for my upcoming Bootstrap 3 book (stay tuned, it’s coming soon!), I discovered the importance of the @screen-xs-max variable, and by extension the other @screen-__-max variables.

In my case, I had three columns set up using the class col-sm-4. This would lay them out side by side horizontally when the viewport width is above the @screen-sm breakpoint (by default 768px).

Then they would shift to a single-column layout below that breakpoint.

HOWEVER, because each column contained a floating button, the blocks of content were not clearing each other when arranged vertically. Buttons were flowing beside headings, and so on.

Thus, for the narrow single-column layout, I needed to set up a rule to force the columns to clear floating elements above them. I also wanted to add some vertical padding between them.

Easy fix not so easy

Seemed easy: Set up a media query with max-width: @screen-sm, and set up rules to clear floats and add padding only under that query.

On initial testing (i.e., resizing my desktop browser window), this seemed to work great.

The problem: This left a 1px zone where the columns remained narrow while clearing one another and thus still stretching down the screen vertically.

I didn’t find this until testing on the iPad mini, whose window width falls exactly in this 1 pixel zone! This was what it looked like:

After a bit of consternation-laden thought, I revisited Bootstrap’s breakpoint variables … and realized I’d stumbled on the reason for the @screen-__-max variables.

You’ll find these lines in Bootstrap’s variables.less file:

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Note what these do: provide a breakpoint that is exactly 1px less than the next larger breakpoint — exactly what I needed to clear up this problem.

The problem and fix in LESS

Here are my LESS lines, with the original offending media query, now commented out and replaced with the new better one:

// @media (max-width: @screen-sm) { // BAD: conflicts 1px with col-sm in markup
@media (max-width: @screen-xs-max) { // GOOD: fits within col-sm in markup
  [class^="col"] { // set columns to clear floats and add padding
    clear: both;
    padding-bottom: 40px;
  }
}

That did it. Problem solved.

See it and test the difference in this Codepen.

Lessons Learned

1. Even with Bootstrap 3’s powerful responsive grid, be sure to test breakpoints very carefully, and across devices, watching for 1px gaps.
2. The @screen-__-max variables can be your friend!

See the relevant Bootstrap 3 docs here