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:
![Covid Desktop Example Screen Capture of a multicolumn set of Images and associated text](/wcms/jim_h/gallery_builds/Covid-Desktop-Example-medium.png?_=48075)
Without mobile columns, the images are shown at 100% width on mobile:
![Covid mobile Example no columns smaller Screen Capture of a set of images and associated text displayed on Mobile without Columns enabled](/wcms/jim_h/gallery_builds/Covid-mobile-Example-no-columns-smaller.png?_=49160)
By enabling columns on mobile, the content becomes easier to digest:
![Mobile Column Example Screen Capture of a Mobile Column used in a Mobile Viewport](/wcms/jim_h/gallery_builds/Mobile-Column-Example.png?_=47509)
Setting Mobile Columns
The mobile columns are set in the row settings.
There are several presets to select from in the dropdown menu.
1 Column |
|
2 Columns |
|
3 Columns |
|
4 Columns |
|