Marsha Docs

Columns Shortcode

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.

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

Shortcode
HTML
Left Column
Right Column
[efsrow]
[efscolumn sm="12" lg="6"]Left Column[/efscolumn]
[efscolumn sm="12" lg="6"]Right Column[/efscolumn]
[/efsrow]
<div class="marsha-row flex flex-wrap -mx-2 md:-mx-6 my-6">
    <div class="columns small-12 large-6 mt-6 lg:mt-0">Left Column</div>
    <div class="columns small-12 large-6 mt-6 lg:mt-0">Right Column</div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

One Column Mobile, Three Equal Column Desktop

Shortcode
HTML
Left Column
Middle Column
Right Column
[efsrow]
[efscolumn sm="12" lg="4"]Left Column[/efscolumn]
[efscolumn sm="12" lg="4"]Middle Column[/efscolumn]
[efscolumn sm="12" lg="4"]Right Column[/efscolumn]
[/efsrow]
<div class="marsha-row flex flex-wrap -mx-2 md:-mx-6 my-6">
    <div class="columns small-12 large-4 mt-6 lg:mt-0">Left Column</div>
    <div class="columns small-12 large-4 mt-6 lg:mt-0">Middle Column</div>
    <div class="columns small-12 large-4 mt-6 lg:mt-0">Right Column</div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

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

Shortcode
HTML
Left Column
Right Column
[efsrow]
[efscolumn sm="12" lg="9"]Left Column[/efscolumn]
[efscolumn sm="12" lg="3"]Right Column[/efscolumn]
[/efsrow]
<div class="marsha-row flex flex-wrap -mx-2 md:-mx-6 my-6">
    <div class="columns small-12 large-9 mt-6 lg:mt-0">Left Column</div>
    <div class="columns small-12 large-3 mt-6 lg:mt-0">Right Column</div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard