Big Cartel Theme Support

How do I set the maximum width of my layout?

How do I set the maximum width of my layout?

Many Aarcade themes have a layout with a set maximum width. To adjust the value of this setting, navigate to your custom style coding area - see Where do I add custom style code? - and paste in the following custom CSS:

/* Set layout maximum width */
#wrap {
	max-width: 1220px;
}

You can edit the pixel width value as needed, for example:

/* Set layout maximum width */
#wrap {
	max-width: 980px;
}

Note that the value always ends with px;

You can also set the value to none to have your layout fill the entire browser window:

/* Set layout maximum width */
#wrap {
	max-width: none;
}

Click the Done and then Save links to apply your changes.

Full width themes

For themes that already have full width layouts, the header and footer (and sometimes the home page) may be full width but page content may be restricted by a full width setting. In most of these cases you should be able to use your web browser developer tool - see HTML & CSS tutorials for non-web designers - to identify the element that is restricting the width of your page content. You can then apply the same methods shown above to style that element.

For example, the main element is commonly used for the purpose of restricting page content width on full width themes. In which case you may end up with custom style code like:

/* Remove page max width */
main {
	max-width: none;
}

Page specific styling

You may wish to only apply your max-width styles to a certain page of your shop. As with all custom styling, we can apply the method detailed in the article Using the body tag to create page specific custom styles to target a specific page or pages. For example:

/* No layout maximum width on home page */
body#home-page #wrap {
	max-width: none;
}

Or:

/* No maximum width on Lookbook page */
body#lookbook-page main {
	max-width: none;
}

Important notes

The above code examples may not work for all themes, such as themes with sidebars or unique full width layouts. Always test your changes outside of your preview area to ensure they have the desired effect. Width settings are an integral part of a responsive layout. When testing your changes, be sure to do so at all window sizes and on mobile devices.

The shortcode alternative

If you are trying to make a specific object or section of custom content full width, you may wish to consider the [[fullwidth]] shortcode as an alternative to the above methods - see Shortcodes - Full width content.

AarcadeHow do I set the maximum width of my layout?