Choose a grid system

By default a 12 column responsive 960px grid is enabled. You can also choose to have more columns or a fluid grid, which is used for sites that have no rigid widths and seamlessly sizes the content at any width. When using the default 960px grid, you can set the number of columns to use per Zone, in each Zone's configuration settings. For more information about changing the column count and creating your own custom grids see the advanced portion of these docs.

It is recommended that people new to responsive design and Omega use the default responsive grid. Fluid grids, although very sleek and responsive, are more complex and need more work to properly setup.

If you have selected default "Enable the responsive grid", you will be presented with the following options. These will affect the way the responsive grid acts as it encounters various screen widths.

Allow customizing viewport meta properties on iOS and Android devices

Selecting this option within the Responsive Settings box opens the Viewport Settings dialog box. This controls the zoom of your website on mobile browsers, it will add the viewport meta tag to display your site properly no matter the mobile device's screen size.

In almost all use cases you will not need to touch these settings as the optimal mobile experience is to set the viewport scale at 1 making the site feel native to the device. For more information on Viewport metatags click here.

Default (960px) Layout Settings

Primary layout

Select the default layout to be rendered in case the responsive grid is disabled. This will also be the default view of your site on IE7/8 or browsers that do not support media queries. "Normal Layout" is enabled by default and is set to the defacto web standard of 960px in width.

Layout settings

Here you can enable/disable fluid, narrow, normal, and wide layouts to be part of the responsive grid. You may also change their media query target sizes and their weight (i.e., loading order). Remember that each layout has a corresponding stylesheet in your subtheme's css folder for theming purposes. The default sizing of the layouts is as follows (based on device screen size, not the size of the grid):

  • Wide: 1200px minimum width - Widescreen Desktop Monitors
  • Normal: 980px minimum width - Non-fullscreen desktop and most tablets in landscape
  • Narrow: 740px minimum width - Tablet in portrait
  • Fluid 740px - fluid mobile based grid

Fluid Layout Settings

In the fluid settings you can choose which of your settings from above (e.g., Narrow, Normal, Wide) will be the primary layout in the event media queries are not supported. Again, by default, Normal (960px) is selected.

**NOTE**
If "Enable the responsive grid" is disabled, you will only have the primary layout option and the use of its corresponding css file. Use this if you want your site to be rendered only on one specific size (non-responsive / non-mobile).