1

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?

5

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..

  • This rule should be extended by .entry iframe or alike as (of WP 4.6) it doesn't affect video iframes like when embedding YouTube. – Volker E. Nov 15 '16 at 23:12
  • 1
    It's a shame themeForest still demands on this value to be set. It's ruining my design, since my theme behaves differently on screen sizes above 1920 px wide. – Jack Johansson May 21 '17 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.