Equal Height Columns Using CSS3 Flexbox in Avada

For Fusion Builder Content Box Elements

Overview

This is the CSS3 flexbox way to solve the ever popular equal height for content boxes problem specifically using Avada Fusion Builder. Check out how to solve this without flexbox here.

By the way, the “equal height” challenge not specific to just Avada. So, if you can master this common web design pattern here, you’ll be able to handle it like a pro in other themes (or static generated websites).

Read First

If you need a refresher on the equal height for content boxes problem, please scope out this post first.

How Was This Done?

Instructions

  1. Add this CSS code to your Custom CSS code editor for the page that has your content boxes.
  2. Adjust the min-height value to what works for you.
  3. Click Update to save the page.
  4. Reload the page to view the changes.

Copy the Entire CSS Code Below by Hovering Over it and Select Copy to Clipboard

Copy to Clipboard

Recap of the Code

This CSS uses the following.

  1. A media query to execute the code below only for larger devices. For anything smaller than 1025 px, the design becomes responsive by stacking the content boxes.
  2. A min-height property for the content boxes to ensure each box has the same height inside their container columns.
  3. Setting align-items to flex-end on the button components to force them to the bottom of their container columns.

If you only want snippets, not all of the code, then copy what you need from here.

/* Only do this fancy stuff for devices larger than a tablet. */
@media only screen and (min-width: 1025px) {
  .content-container {
    display: flex;
    flex-flow: column;
    flex: 1 200px;
    min-height: 450px; /* Change this to what you need. */
  }
  /* Need to force the width for the paragraph for some reason. */
  .content-container p {
    min-width: 300px !important;
  }
  /* Ground the CTA button. */
  .fusion-button-wrapper {
    flex: 1 100px;
    display: flex;
    align-items: flex-end; /* Ground the button . */
    justify-content: left; /* left | center | right */
  }
}

Questions or Comments?

If something isn’t clear or if I missed something, please leave me a comment below.

Buy Me a Coffee at ko-fi.com