Responsive Design and Other Theme Layouts

Types of Layouts

There are three basic types of theme layouts or structures: fixed, flexible and responsive.

↑ Table of Contents ↑

Fixed Width

In this type of layout, the site’s width does not change, even as the browser window is narrowed. When viewed on a small device like a phone, this causes the page layout to look very tiny, forcing visitors to zoom in to read the content. An example of a fixed-width theme is Twenty Ten. Fixed-width themes typically use static units – like pixels or ems – for dimensional values, such as height and width.

Fixed-width theme Twenty Ten on desktop, iPad and iPhone

Fixed-width theme Twenty Ten on desktop, iPad and iPhone

↑ Table of Contents ↑

Flexible Width

Flexible-width themes generally set a minimum and maximum on the site’s overall width. The content narrows and widens within that range as the browser window is resized. Content and sidebar widths are typically specified as a percentage of the overall width. An example of a flexible-width theme is Andrea.


Mobile Theme on iPhone

↑ Table of Contents ↑

Mobile Theme

If you’re using a fixed- or flexible-width theme, we recommend activating the mobile theme in your dashboard, under Appearance  Mobile. The mobile theme is specifically designed for smaller devices and puts your content front and center, so that visitors on those devices have a clearer and more readable view. When you activate the separate mobile theme, WordPress loads it up if a visitor comes to your site on a smaller device like a phone or small tablet. You can compare the screenshot to the right with the one above at the far right, to contrast the mobile theme with a typical fixed-width theme.

Responsive Width

With CSS3 along came media queries, which allow developers to build themes that adapt to different viewing conditions, like screen size and resolution. As a browser window is narrowed in a responsive theme, or when viewed on a smaller device like a smart phone, the theme adjusts to present your content in the most clear and readable way. Changes can include moving a sidebar below the content area; resizing headers, content and sidebar areas; changing the size of headings and body text, and more. An example of a responsive-width theme is Truly Minimal. Visit the demo site and narrow down your browser window to see how a responsive theme works. You can also browse our wide variety of responsive-width themes in the Theme Showcase.

Responsive-width Theme on desktop, iPad and iPhone

Responsive-width Theme on desktop, iPad and iPhone

↑ Table of Contents ↑

Media Queries

Media queries are CSS3 rules that let you control how a site looks at different browser widths. They start with @media followed by a list of things to limit the scope of the CSS.  For example, here is a CSS @media block that limits a group of CSS rules to screens (meaning it doesn’t apply to print) that are smaller than 768 pixels wide:

@media screen and (max-width: 768px) {
    /* CSS rules go here. */

↑ Table of Contents ↑

Custom CSS & Responsive Design

When making CSS changes to the structure of responsive-width themes, you have to look at the existing CSS to see if the changes you want to make will require the use of media queries to retain the responsive nature of your theme. It’s a good idea to maximize your browser window and then slowly narrow it down to see how the element you want to modify behaves. In general, to widen or narrow your main content area or sidebars will require some media queries. Some themes may have only a few media queries and others may have many.

Learn more about Using Media Queries with Custom CSS.

Not quite what you're looking for?

Get Help