Marsha Docs

Columns

The columns shortcode is actually two shortcodes. Before you can create a column shortcode, you need to create a row shortcode to surround your columns.

The shortcode splits the section of page into 12 columns and you can assign numerical values to the options (explained below) to setup your columns. If you want on large (laptop and desktop) screens to have two columns split evenly you would assign both of them a large/lg value of 6 (6 + 6 = 12). If you would like to have three columns split evenly you would assign them each a large value of 4 (4 + 4 + 4 = 12).

The default value for small screen should almost always be 12, this will make the column full-width on phones/mobile devices. The columns will remain in the same order, they’ll just automatically stack on top of each other. You should never set the large width to 12. Nothing will display if this value is set to 12.

Note: Columns should not be used as a “trick” to center content within a section.

Understanding Columns and Responsive Design

Assume we have three columns, we set each to be 12 columns on small and 4 columns (1/3) on large. This is how they would display on desktop/laptop and mobile devices.

On Desktop/Laptop Screens

Col 1
Col 2
Col 3

On Mobile

Col 1
Col 2
Col 3

Columns Shortcode Parameters

The parameters for the columns shortcode:

  • Small Screen Width (sm): This parameter is optional, if left out of the shortcode it will default to 12, which is the max value. Only in extremely rare circumstances should you ever a value other than 12 for the small parameter. If you find yourself thinking you need to use a different value, please reach out to the UComm Web Team for assistance.
  • Large Screen Width (lg): This value is the width of the column on laptop or desktop screens (specifically any screen wider than 1024px). Remember, it’s based on 12. So, if you want a column 25% of the screen, you’d want the value of 3 here (3 / 12 = 25%).

Column Shortcode Examples

One Column Mobile, Two Equal Column Desktop

Left Column
Right Column
[mu_row]
[mu_column sm="12" lg="6"]Left Column[/mu_column]
[mu_column sm="12" lg="6"]Right Column[/mu_column]
[/mu_row]
Copy Code to Clipboard

One Column Mobile, Three Equal Column Desktop

Left Column
Middle Column
Right Column
[mu_row]
[mu_column sm="12" lg="4"]Left Column[/mu_column]
[mu_column sm="12" lg="4"]Middle Column[/mu_column]
[mu_column sm="12" lg="4"]Right Column[/mu_column]
[/mu_row]
Copy Code to Clipboard

One Column Mobile, Two Column Desktop at 75% and 25%

Left Column
Right Column
[mu_row]
[mu_column sm="12" lg="9"]Left Column[/mu_column]
[mu_column sm="12" lg="3"]Right Column[/mu_column]
[/mu_row]
Copy Code to Clipboard