Design

Responsive Design and Other Theme Layouts

There are three basic types of theme layouts or structures: fixed, flexible, and responsive. The vast majority of themes offered on WordPress.com are responsive. This guide explains these different layouts in more detail.

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.

It is rare to see this type of layout in modern web design. An example of a fixed-width theme is Twenty Ten (named after the year it was released.) Fixed-width themes typically use static units like pixels 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.


↑ Table of Contents ↑

Responsive Width

With the prevalence of smartphones, a website needs a responsive layout that is optimized for mobile. This means that as a browser window is narrowed, or when viewed on a smaller device like a smartphone, the theme adjusts to present your content in the clearest 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.

You can browse our wide variety of responsive-width themes in the WordPress.com Theme Showcase. When your site has a responsive theme, it will adapt its layout to make your site look its best on all screen sizes big and small. If your theme kept the same layout on mobile as it has on desktop, it would be very difficult for mobile visitors to do things like navigate menus and browse pages.

Responsive-width Theme on desktop, iPad and iPhone
Responsive-width Theme on desktop, iPad and iPhone

↑ Table of Contents ↑

Custom CSS and Responsive Design

Media queries are CSS 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. */
}

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