Media Queries

Media queries allow you style sheets to apply specific styles depending on the current size of the browser. Normally these need to go a the root of your CSS document but thankfully Sass has a media bubbling behavior that will ensure they find their way to where they belong and you are free to define them in a place that makes sense to you, even nesting them inside other selectors.

@media screen and (max-width: 1000px)
#page-wrapper
margin: 1em
top: 0

Here we specify that if the browser width ever dips below 1,000 pixels, we should remove the top margin, drop the rest of the margins from 5em to 1 and stop using up so much real estate for borders. This helps on smaller screens and netbooks, but to be able to work well all the way down to mobile, we probably want to kill our margins completely and pop the sidebars above or below our main content.

@media screen and (max-width: 500px)
#page-wrapper
margin: 0
body.one-sidebar.sidebar-first, body.one-sidebar.sidebar-second, body.two-sidebars
#content, #sidebar-second, #sidebar-first
@include full-width