The website themes use a template width value .cmsUsualWidth as set in the stylesheet to maximise the width of website content. This is to ensure a good experience for customers as page layouts such as contact forms and gallery pages (especially the smaller thumbnail ones) are designed to work at a certain width.
This page details how you can alter your theme in order to make page content go full width, if you have chosen a template that is not ultrawide by default.
Ultrawide / full width content in the Contentbox Editor
Contentbox is the editor to that makes it easy to create full width content. By default Contentbox sections default to the .cmsUsualWidth value, but you can quickly change the content width property to Full.
- Click the BLUE COG (Settings) icon at the top of the section
- From the options presented, change the CONTENT WIDTH dropdown to full.
- Content will then stretch full width within the editor
System generated pages, TinyMCE and Drag-drop pages to not go full width by default
As page content is intended to fit nicely within a dedicated area,
system generated pages are restrained to a max-width as set in the theme
style.css or template A file by default.
Changing a Drag-drop page to go full width
The best approach to make a drag drop page go full width is to change it to a Contentbox page and set to full width as per the instructions above.
Changing a system generated page to go full width
While it is possible to change system generated pages to go full width, it is recommended you only do this for pages that use FLEXIBLE GRID layouts. These are not fixed column layouts and will reorganise the amount of columns depending on the width of the browser. Using any other layout will not give a good result.
Available Flexible Page Layouts
Currently there are only a couple of layouts available for this purpose.
- Gallery Flexible Grid (Gallery Page)
- Gallery Flexible Grid 6/4 (Gallery Page)
- Shopping Flexible Grid (Shopping Cart Page)
- Flexible Grid (Categories Display Format) - set via E-COMMERCE > CUSTOM DISPLAY OPTIONS
Example of a fullwidth gallery page using the Gallery Flexible Grid 6/4 (Gallery Page) layout.
Adding some custom CSS to enable full width content
It is possible to set any system-generated page to go full-width by targetting a template layout with a CSS rule. Every template can have up to 8 different template files A-H.
When using a CSS rule you do not need to add a template layout to the template area - it will use the existing template A if no file found, but allow the CSS rule to work.
You can find a rule for setting the max-width of
the content of any page assigned to TEMPLATE B to 90% below.
This rule should be added to your content.css stylesheet file.
.cmsTemplateB #ContentCMS{
max-width: 90%!important;
}
Changing the page to use the full width template
You can then change any page to template B. See this help-faq for more info.
Changing a your Category List / Product List page to go full width,
without affecting the Product Detail page
It is possible to allow your main shopping layout which can contain your Categories and Products in a list / grid format, to go full-width but keep the Product Detail width page narrow,
by targetting only the list page with a CSS rule. You can find a rule for setting the max-width of the content on this page to 90% below.
This rule should be added to your content.css stylesheet file.
.shoppingListBody #ContentCMS{
max-width: 90%!important;
}