Creating Multi-Column Sections

You have a a few options for creating sections with multiple columns.

1. You can select the component layout "section 2-col"

This is ideal if you have simple text and/or images that you want to layout in two columns on a page. You can use the default layout which makes the columns 50/50 or you can select a 1 third/ 2 thirds layout or a 2 thirds/1 thirds layout.

2. For more complex layouts, you can select a component layout of "Layout Builder".

With the Layout Builder option, you can create a complex layout with multiple columns, each of which can have advanced functionality.

When designing "Layout Builder" as the component for a subcategory of the Homepage, which already has a component type of Layout Builder, you are nesting one Layout Builder insider another.

Some examples of good situations to use the nested Layout Builder:

You want to have a section with three or more columns.

You want to have a section with multiple columns and include some advanced functionality in one of those columns, such as a slideshow or a linked category, or anything that includes more than a stream of text and and images.

Creating an Advanced Multi-Column Layout

Create a new category and assign these settings:

Component Type: Layout Builder

List Action smartlist

Create subcategories of your Layout Builder category with these settings:

Each subcategory should have a Component Type of one of the MightyMerchant section components.

List Action: cpage

In your _main.scss file create a style for your main layout_builder section:

section.layout_builder > .section-container {
  display: flex;
  flex-direction: row;
  @include breakpoint-xs-max(){
    flex-wrap: wrap;
  }
}

For each of your sections add styles to _main.scss that look something like this:

#section-109 {
  @include responsive('width', (xs: 100%, sm: 50%, md: 66%));
  @include breakpoint-xs-max {
    order: 0;
  }
}<br>

You will want to specify a percentage width for each section/column as well as an order for mobile.