Ultrawide Content

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.

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
  
  

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.

Template Variations A-H

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;
}