3 Column Container

The Three Column Container widget is a very flexible layout widget you can use to achieve various formatting options in the body of your email. It's is fully mobile friendly and can either stack columns in mobile devices or not stack columns in mobile.

Using the Three Column Container

When the Three Column Container is added to an email, it is initially configured to show three columns each allowed 33% of the display area. It is initially configured with a pre-set spacing of 5px between the columns:

Using the options in the Design section, these options can be configured.

Setting Space Between Columns

Using the Space between columns slider you can control the exact spacing between columns.

It's recommended to use spacing between column instead of setting padding on items within the columns. When columns stack on mobile the space between columns is eliminated. If padding is used on an element the padding is still shown on mobile.

Setting Vertical Alignment

The Vertical Alignment option enables you to control how the items in each column align vertically. The default is for items to align to the top, but you may want to use other alignment options depending on the desired layout.

Mobile Device Behavior

The default behavior is for columns is to stack vertically on mobile. This simply means that a two column layout will convert to a one column layout with the left most item shown on top.

However, for certain designs, column stacking is unnecessary. To prevent stacking on mobile simply toggle the Do Not Stack Column option for On Mobile Devices.