Theming

Omega Grid and Responsive Settings for Drupal 7

Last updated March 3, 2020
Categories

Check your version

This tutorial 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.

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'