Mobile Columns

Best Practices

Overview

Previously, the TP4 template package did not offer columns on mobile (everything was 100% width). With the increasing amount of traffic on mobile devices and the need to improve mobile layouts, the Template Package now includes support for mobile columns in:

Viewport 1
Viewport 2
Viewport 3

Usage

Use mobile columns when images do not need to be 100 percent width and can be placed to the right or left of content.

Here is an example of a page from the COVID-19 website on desktop viewports:

Screen Capture of a multicolumn set of Images and associated text

Without Mobile Columns

Without mobile columns, the images are shown at 100% width on mobile:

Screen Capture of a set of images and associated text displayed on Mobile without Columns enabled

With Mobile Columns

By enabling columns on mobile, the content becomes easier to digest:

Screen Capture of a Mobile Column used in a Mobile Viewport

Setting Mobile Columns

The mobile columns are set in the row settings.

Screen Capture of Mobile Column Settings in WCMS

There are several presets to select from in the dropdown menu.

Screen Capture of Mobile Column Settings in WCMS

Column Presets Available:
1 Column	100% (Default Setting)
2 Columns	50% / 50% 33% / 66% 66% / 33% 25% / 75% 75% / 25%
3 Columns	33% / 33% / 33% 50% / 25% / 25% 25% / 25% / 50%
4 Columns	25% / 25% / 25% / 25%