Equal Height Columns (Using Custom CSS in Avada Theme Fusion Builder)

Overview

The equal height columns problem is where we have (say) three columns in one row. Each column has a different amount of content. We want to have each column background be the same height. And, we want to have buttons or links at bottom of each column be lined-up at the same level/height across the columns in the row.

Here is one way to solve the ever popular equal height for content boxes problem. See the inspiration behind this solution on the Avada Theme Fusion Community Support Forum.

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).

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

As mentioned in the earlier post, 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. Absolute positioning on the button components to force them to the bottom of their container columns.

If you only want snippets, not the whole six lines of 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 {
    min-height: 500px; /* Change this to what you need. */
  }
  /* Ground the CTA button. */
  .fusion-button-wrapper {
    position: absolute;
    bottom: 5px;
  }
}

Before and After

Feature for Avada Out of the Box Theme Fusion Equal Height Column Demo - freelance web developer mark l chavesFeature for Avada Theme Fusion Equal Height Column Demo - mark l chaves

How Can I do this with Flexbox?

See the Pen Equal Height Columns Using Flexbox 2 by mark (@marklchaves) on CodePen.

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