CMS - Layout - How to set Column Width | Column Width - How to Set it

When using the Column (or Grid) layout, each feature must have a set width. If this width is not specified, the feature will appear wider than the module limits.

Setting the Width

To set this width, we use a custom CSS command site-col-x, substituting the ‘x’ for the width of the column. Custom CSS Classes can be applied in feature settings to adjust the width and placement of the feature on the page:

• site-row creates a new row in the column structure.*
• site-col-full-width forces the feature to the full page width.
• site-right-block forces a feature to be right aligned.

By substituting ‘x’ for a number between 1 and 12, we can choose how many of the Column layout’s 12 ‘columns’ are taken up by the feature. For example, a feature using the ‘site-col-12’ CSS will take up the entire content zone width, whereas a ‘site-col-6’ feature will only take up half.

This means you can place smaller features next to each other – as long as the numbers add up to 12, they will appear in the same row. 

*Please note that this should only be used when you would like to start a new block of features, for example moving from body content to the footer, and does not need to be applied to create a new line of features.

Discover more