Column Settings

Each column in a container also has it’s own settings you can apply. These are:

  • Custom visibility, margin and bottom values which can be customized for 5 responsive sizes:
    • Default – On Screen sizes higher than 1200px
    • Large Desktop – On Screen sizes up to 1200px
    • Desktop – On screen size 1024px
    • Tablet – On Tablet Portrait screen size 768px
    • Mobile – On screen sizes up to 520px
  • Background image
  • Colors
  • Border
  • Border Radius
  • Column specific vertical alignment
  • Z-Index (priority)
  • Background Stretch: Allows column background to stretch to the height of the parent container.

When is Background Stretch used?

An example scenario would be: You have 2 columns with right column has a lot of content, and lets say left column has no content and has a background image. Normally the left column height would fall short agains the right column.

Before Background Stretch:

Left Column

Right Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum lectus non pretium maximus. Aliquam vel eleifend augue, ut molestie dui. In nec ligula rhoncus, aliquam massa sed, laoreet diam. Sed lectus mauris, dictum in eros sed, elementum porta ligula. Fusce dignissim eros lacus, non interdum tellus hendrerit blandit.

After Background Stretch:

Left Column

Right Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum lectus non pretium maximus. Aliquam vel eleifend augue, ut molestie dui. In nec ligula rhoncus, aliquam massa sed, laoreet diam. Sed lectus mauris, dictum in eros sed, elementum porta ligula. Fusce dignissim eros lacus, non interdum tellus hendrerit blandit.

The Z-Index Option

You can use the z-index values to overlap columns on each other:

Column 1 — z-index 3

This column has -50px negative margin to the right.

Maecenas vestibulum lectus non pretium maximus. Aliquam vel eleifend augue, ut molestie dui. In nec ligula rhoncus, aliquam massa sed, laoreet diam. Sed lectus mauris, dictum in eros sed, elementum porta ligula. Fusce dignissim eros lacus, non interdum tellus hendrerit blandit.

Column 2 — z-index 2

Maecenas vestibulum lectus non pretium maximus. Aliquam vel eleifend augue, ut molestie dui. In nec ligula rhoncus, aliquam massa sed, laoreet diam. Lorem ipsum dolor sit amet

Column 3 — z-index 1

This column has -50px negative margin to the left.

Z-Index Another Example:

Left Column

This column has higher z-index

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum lectus non pretium maximus. Aliquam vel eleifend augue, ut molestie dui.

Was this helpful to you?