Theming

Omega Grid and Responsive Settings 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.

Sprout Video

Responsive design is more than a just a buzzword these days but a standard practice of good web shops when building out a site. Omega provides a responsive design out of the box and gives lots of options to layout your content in the proper places and the ability to work with the break-points all with a User Interface. In this lesson we will cover:

  • Omega responsive options
  • Column settings for your grid layout
  • Omega responsive layout settings
  • Device viewports and media queries

We end the lesson getting our new sub-theme ready to handle our 960 robots theme and the 16 column setup we designed it with.

If you prefer working with code, instead of the web UI, you may configure your theme as follows to change your column settings from 12 grid columns to 16 in your theme's .info file:

Find and replace all the instances of:
_columns] = '12'
with:
_columns] = '16'

There may still be additional regions that also need to be set which weren't the full width. You can edit other regions as needed, such as:
_region_user_first_columns] = '8'
change to:
_region_user_first_columns] = '12'