Equal Height Columns (Out of the Box Avada Content Boxes)

Goals

On a laptop and desktop view.

  1. We would love to have the backgrounds of the content boxes be equal height.
  2. Say we have three columns with text and a CTA button in each column. The three CTA buttons that hug the bottom of the text blocks (not the bottom of the columns). The positioning of these buttons are at different heights. We want them to all line up evenly across the bottom of the content box columns instead.
  3. We don’t want to be forced to always use the exact amount of text for our content boxes like the Avada demos do. The Avada Theme Fusion demos give the illusion of equal height content boxes in a row. They do this by ensuring all the text in their content boxes have the same amount of characters.

Our solution should look something like this.

Feature for Avada Theme Fusion Equal Height Column Demo - mark l chaves

After (Custom CSS)

Two Approaches

Using Avada out of the box, one might try these two approaches

First Try: One Row and One Column of Content Boxes

  1. Create one row with one column.
  2. Inside the column, add a Content Boxes Element.
  3. Create three items inside the Content Boxes Element.

Second Try: One Row with Three Columns with One Content Box Each

  1. Create one row.
  2. Enable the Set Columns to Equal Height setting for the row.
  3. Create three columns (1/3 width each).
  4. In each 1/3 column, create one Content Boxes Element.
  5. Create one item in each of the Content Boxes Element.

As you probably have noticed (either on your own or by looking ahead), either approach doesn’t achieve our goals.

Highlighted Areas

Below, I’ve highlighted the column components for each of the two approaches mentioned above so you can see what’s happening with the spacing inside each layout.

The Fusion Columns are in yellow. The Fusion Content Boxes are in green.

Copy to Clipboard

Solution

What’s the solution? One solution involves using the First Try method (above) and writing custom CSS to

  1. Perform a media query (responsive design).
  2. Set a fixed height for the content boxes.
  3. Push the buttons down to the bottom using absolute positioning.

I know you are wondering. How many lines of code this will this cost me? Six!

Go to the Solution