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: 

Percentages Not Pixels: Adapting the 960px Grid

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
    Percentages Not Pixels Adapting the 960px Grid
  • 0:05
    with Amber Himes Matz
  • 0:08
    Our original 960 Robots
  • 0:10
    theme was based on a 960 grid consisting
  • 0:13
    of some straightforward container and grid classes
  • 0:16
    all having widths declared in pixels.
  • 0:19
    Now in our new, responsive robots theme for the Anytown Farmer's
  • 0:22
    Market, we need to convert all those widths declared in absolute units
  • 0:27
    into relative units.
  • 0:28
    When we resize the viewport, the layout doesn't scale.

Percentages Not Pixels: Adapting the 960px Grid

Loading...

The original 960 Robots theme is based on a 960 pixel grid. It has container and grid classes with widths declared in pixels—an absolute metric. In this lesson, we will take a first step in implementing a responsive design: converting absolute units to relative ones. We'll begin this process by editing the 960.css file, which contains the width declarations for our container and grid classes that make up our site's layout. Using the target ÷ context = result formula, we'll convert widths declared in pixels first to ems, then to percentages, with a little nudge of the decimal point over two places.

With our layout's container and grid classes using relative widths declared in percentages, we'll be on well on our way to making our site more fluid and flexible.

Downloads: 
Log in or sign up to download companion files.
Additional resources: 

https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 03-fluid-layout)