Blog

To add columns to a page, just add the following css to the stylesheet or custom.css, and wrap the content you want to be in columns with the divs

This code will have the content appear in multiple columns for desktop and tablet, and be in 1 column for mobile

For 2 columns

.col-2 { width: 49%; display: inline-block; padding: 1%; vertical-align: top; } @media(max-width: 767px){ .col-2 { width: 100%; padding:0%; } }

Wrap the content in the below divs

For 3 columns

.col-3 { width: 32%; display: inline-block; padding: 1%; vertical-align: top; } @media(max-width: 767px){ .col-3 { width: 100%; padding:0%; } }

Wrap the content in the below divs

For 4 columns

.col-4 { width: 24%; display: inline-block; padding: 1%; vertical-align: top; } @media(max-width: 767px){ .col-4 { width: 100%; padding:0%; } }

Wrap the content in the below divs

For more than 4 columns

Set the width to be the 100%/(the number of columns you want) - 1%

.col-x { width: x%; display: inline-block; padding: 1%; vertical-align: top; } @media(max-width: 767px){ .col-x { width: 100%; padding:0%; } }

Automatic Columns

You can also use the following code to have the content be split up automatically. PLEASE NOTE: this code will try to split the columns evenly. It may have a list or paragraph be split between columns. If you want to set which content will be in each column, use the previous code.

.columns-2 { columns: 2; } @media(max-width: 767px){ .columns-2{ columns: 1; } }

Wrap the content in the below divs