Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Alternate resources: 

Adding Media Queries and Breakpoints to 960.css

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:03
    Adding Media Queries and Breakpoints to 960.css
  • 0:05
    with Amber Himes Matz
  • 0:08
    With media queries,
  • 0:10
    we can apply CSS conditionally.
  • 0:12
    This means that we can take our flexible layout one step further
  • 0:16
    by stacking our regions into one column for smaller screens
  • 0:20
    instead of simply scaling down our two-column layout
  • 0:23
    to the point of ridiculousness.
  • 0:25
    In this lesson, we'll use the Responsive Layouts tool
  • 0:28
    in Firefox to identify our starting breakpoint-- that approximate point

Adding Media Queries and Breakpoints to 960.css


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.

Log in or sign up to download companion files.
Additional resources: (checkout branch 07-08-flow-media-queries)