Triangle

Columns

Columns work the same on full width pages as on our left side menu template.

View the guidance for columns

Vertically centred content

On full width templates, you also have the option to vertically centre your content in a column.

  1. Pull in the column template you want to use as you normally would
  2. Find /SharedResources/MiniTemplates/2022/align-content-vertically-centred and pull this in to the column you want the content to be vertically centred in
  3. Put your content within this frame
person looking at website on phone and laptop

Vertically centred content.

 

 

Responsive images

Site visitors view our web content on a variety of laptops, PCs, smartphones and other devices with varying screen sizes and web browser capabilities. The full width page template is designed to display responsively within these varying user interfaces, rather than keeping content in fixed sizes.

It's important to make images responsive so that they can fit flexibly within the page layout and the user's browser, rather than keeping them at a fixed with. Always use responsive images on full width pages to keep the layout consistent and avoid content overlapping or overflowing.

Add the img-responsive CSS class in Image Properties to make an image responsive.

For high-resolution images, always crop or resize them to an appropriate size (for example, 1000px wide or less) before including them in the page. Otherwise the large file size will slow down the page loading time. Equally, make sure they are large enough that they don't get stretched or pixelated at varying screen sizes.