The layout settings allow you to change the layout of your theme, including:

• The position and width of the sidebars
• The width of the page
• The layout type - fixed or fluid
• Set a maximum width if using a fluid layout
• Set the media query

The combination of these settings is what we term the layout engine. Sidebar postion, width, page width, layout type and max widths we are all pretty familiar with, or at least are quite easy to understand - what gets most people is the Media Query setting.

Adaptivetheme uses these "media queries" to switch the layout depending on the size of the screen so we can support devices with different size screens - such as mobile devices like iPhones and tablets (any device that supports media queries, which is most modern mobile and desktop browsers and devices).

Lets walk through the layout settings for Pixture Reloaded's Standard Layout - subsequent layouts for Tablets and Smartphones are basically the same. All our 7.x-2.x compatible themes have these settings, and the configuration for them is quite similar for most themes.

The Layout Settings

The layout settings are at the top of the form (in vertical tabs). All our themes ship with preset settings (even the blank sub-theme for building your own theme), so all themes work with zero configuration. However, should you want to customize the layout follow these steps.

This screen shot shows the Standard Layout tab - the Tablet and Smartphone tabs are in separate vertical tabs. These are the settings we are interested in.

Sidebar Layout

For each of the Layout types (Standard, Tablet, Smartphone) you can can set different sidebar layouts. For tablet and smartphones you can set separate layouts for both orientations - landscape and portrait. Standard sidebars layout options include the normal three column layout, the popular "both sidebars on the right" type layout, and the lessor used "both sidebars on the left".

To select a sidebar layout simply click the icon.

Sidebar Width

Here you can choose two things - the unit (such as percentage, pixels, or ems) and the value. For example you may wish to have fixed width sidebars so you can choose pixels and say 240 for the first sidebar and 180 for the second sidebar.

Page Width and Max Width

The page width setting will, as stated, set the width of the page. It will also trigger what type of layout your site will use - fluid (responsive layout) or fixed (adaptive layout). Use percentages for a fluid responsive layout and pixels or ems for a fixed adaptive type layout.

Should you choose percentages for fluid width the "max-width" setting will appear - this allows you you control the overall maximum width of the page. This is handy because fluid widths (which you normally will set to 100%) can be too wide in really big screens, so setting a max-width gives you more control over the design, especially line length.

Media Query

Finally we set the media query. This will trigger this particular layout to be used. Each sub-theme ships with preset defaults so you can leave this setting and it will work just fine. If you want customize it just enter your media query and save.

This theme uses respond.js to support IE8 and below so be aware that respond.js does not support -device-width or any of the advanced query options (which makes is smoking fast and lightweight). Generally you don't need them anyway and min and max width query settings get the job done.

You learn more about media queries and responsive design in general by reading Ethan Marcotte's seminal article on Responsive Web Design.

Table and Smartphone Layouts

The other layouts all follow this basic pattern, with some small differences - Smartphones and Tablets have a different set of layouts to choose from, and both have options for landscape and portrait layouts.