Theming

Adding Media Queries and Breakpoints to 960.css for Drupal 7

Last updated
Categories

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

Alternate resources

Sprout Video

In this series, we’ll start out by adapting the Anytown Farmers Market website layout for display on a small mobile  screen. The current layout is a stacked 2-column layout  with a full-width header, primary content column, and two sidebars. We'll simplify and update the wide layout to use just one main content column plus a right sidebar that will stack under the content region on  smaller viewports. We'll use the breakpoints that we identified in the  previous lesson to implement width-based media queries and trigger the appropriate layout — stacked for narrow screens and 2-column for wider viewports.

Additional resources

https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 07-08-flow-media-queries)