$content_width for responsive UI

by

In our “mobile first” age a theme without responsive UI is treated like from stone age. It means that a theme could have different content width for different devices. But one of requirements for theme development is to provide $content_width variable which should contain actual width of content area of a theme.

Taking in consideration said above, I have the big question what width should I set for $content_width variable? A width for mobile phones/tables/laptops/desktops?

1 Answer
1

When that variable was added to themes, was the July 2008. First time someone start talk about responsive design was the May 2010, two years later.

Nowadays, that variable have lost is important (if ever it had one).

Codex itself recommend to set the max width in css, like

.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto;
}

and we know that it can be made responsive using media queries.

This is sufficient to avoid content break layout in modern themes.

However, the $content_width variable, is referred to max width that the theme handle, not the max width that the client device can visualise.

So if your theme as a fixed layout, where the main column is large, e.g. 600px, set $content_width to that value.

If you have a flexible layout, or a responsive one, just set the recommended css and don’t use $content_width at all or set it to a reasonable big size (full hd?), because it is the biggest size you want to display, and if the client device don’t support that width you have to accomplish in other ways, sure not decreasing that value..

Leave a Comment