Dec 18, 2020 | Divi Resources

How to equalize column heights in Divi?

Multiple times when adding content on the site, we require to add that in columns. The part that gets complicated when the text doesn’t contain equal words and create a non uniformity in the structure of the content appearance. You can take a look at the below blurbs, how bad they are looking with disproportioned content. 

Examples of Uneven Column Heights 

H
This is sample content to display unequal column heights due to large and short content length.
F
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.
I
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.

Columns without Button

H

Column 1

This is sample content to display unequal column heights due to large and short content length.

G

Column 2

This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.
I

Column 3

This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.

Columns with Button

See how odd these two examples look with uneven column heights. So, how can we overcome this situation in the Divi theme? Well, there are two methods. One uses the in-built option available in the row settings, and another method is to use a custom CSS for columns.

Let’s check out how we can overcome this issue using both options.

 

Equalize Column Heights by using Divi’s in-built option

Before we use the in-built option of the Divi theme to equalize column heights, first, go to the modules’ settings and remove the background color if you have set that already. In the above examples, I have given background color to the modules. So, let’s first remove that.

Go to module’s settings → Background → click the Delete icon / reset background.

 

Delete or reset Divi module background

Do the same for the rest of the modules.

 

Step 2: Apply background to the columns

 

After removing color from the modules’ background, we need to customize the background of the columns. So, to do that, go to row settings, and then individually apply color to the columns, one by one.

This is how you’d apply the background to the columns,

1. Open Row Settings, 

2. Then open Column Settings,

3. In the Content Tab, go to the Background settings, and customize column background with Color, Gradient, Image, or Video. 

After following the above steps for each of the columns, you’d get the following results. 

H
This is sample content to display unequal column heights due to large and short content length.
F
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.
I
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.

Columns without Button

H
This is sample content to display unequal column heights due to large and short content length.
F
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.
I
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.

Columns with Button

Though the above outcomes look the same as examples, but we have done the trick that would help us in the following steps to equalize column heights.

 

Step 3: Equalize Column Heights

After applying background customization to each column, go to the Row SettingsDesign tab → Sizing → , Equalize column heightsYES.

  Equalize column heights in DiviOnce you do that, the magic would happen, and you’ll get the following outcomes with equalized column heights.

H
This is sample content to display unequal column heights due to large and short content length.
F
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.
I
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.

Columns without Button

H
This is sample content to display unequal column heights due to large and short content length.
F
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.
I
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.

Columns with Button

That’s it; we’ve equalized the column heights using the in-built Divi options. Now, let’s see how we can equalize column heights using a custom CSS.

 

Equalize Column Heights using Custom CSS

Using the in-built option to equalize column heights works, but when we add elements in the columns, they get placed down below each other one by one. Furthermore, it also leaves space at the bottom. This is something that sometimes users don’t want to have in the columns. Therefore, by using a custom CSS to equalize column heights, we can create appropriate spacing between elements and eliminate the extra spacing at the bottom. Follow the below steps to equalize column heights using a custom CSS.

 

Step 1: Assign class name

 

Before we use the custom CSS to equalize column heights, we need to assign the class name to the row. For that, open the Row Settings → Advanced tab → CSS ID & Classes → CSS Class → input the class name, “el-flex-row,” without the quotation marks, just like the below screenshot.

Equalize column heights with CSS

 

Step 2: Add custom CSS

 

Once given the class name to the row, we need to add the custom CSS inside the theme files for the class to reflect changes. To add the CSS, on your WordPress Dashboard, go to DiviTheme Options → General → scroll a bit, and in the Custom CSS field, paste the below custom CSS.

 

 

This is how your columns would appear with equalized column heights after applying the above custom CSS.

H
This is sample content to display unequal column heights due to large and short content length.
F
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.
I
This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length. This is sample content to display unequal column heights due to large and short content length.

Conlcusion

That’s it; we’ve successfully equalized our column heights using Divi’s in-built option as well as with a custom CSS. Both options are easy to implement and provide complete satisfaction when making columns height equal. I hope you’d find this tutorial useful and overcome your problem of uneven column heights in a few clicks. Share it with other Divi designers, and if you still find it hard or a bit confusing, let me know in the comments. I’ll be more than happy to assist you.

Plus, if you want to keep updated with the latest Divi tutorials and exciting offers on our premium Divi products, then go and subscribe to our free newsletter now!

Posted By:
Karan
Karan loves making web beautiful with his keen eyes toward design.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Flexile Footers – A pack of Ultimate Divi Footers

Divi Flexile Footers – A pack of Ultimate Divi Footers

Footers provide users with a lot of useful information, whether it is the footer menu, short info about the business, or social icons. You can use a Divi footer to emphasize your website’s bottom area for better user interaction and get multiple goals fulfilled, such...

How to add an Ajax Add to Cart button to Shop module in Divi

How to add an Ajax Add to Cart button to Shop module in Divi

By default, when you insert the shop module in the Divi theme, you don't get any add to cart button. The shop module only displays products with pricing, sale tag (if the products are on sale), and a sorting filter, but no "Add to Cart." However, you've probably seen...

Divi Flexile Headers – A pack of Ultimate Divi Headers

Divi Flexile Headers – A pack of Ultimate Divi Headers

Headers are an essential part of a website. From assisting users navigating the site pages to pages to bring leads to a business, headers play a key role. And with the Divi headers available in the Divi Flexile Headers, you’ll be able to enhance this role in doubles....