You can equalize the column heights within a Divi row by activating the feature in the row settings.

This will force all columns to take on the same height as that of the tallest column in the row.

The feature will equalize the column heights, not the modules within those columns, so ensure you have set any background colors or images to the columns rather than the content modules within those columns.

equal-column-height

When you activate the equalize column heights setting in your row setting it may not have the expected results and you may think it is not working.

This is because the equalize column heights feature will only make the columns equal heights and not the modules within those columns.

The mistake many Divi users make is to add a background color or image to the modules within their row, rather than adding the background color or image to the columns within the row itself. The modules are not equal in height so any color or image added to those modules will stop where the module stops and create what looks like unequal column heights.

To equalize your Divi columns you need to set the background color on the row columns and not on the modules within the columns. As the name suggests, equalizing column heights does just that, rather than equalizing the modules that sit within the columns.

How to equalize column heights in Divi?

Getting your columns to be of equal heights in Divi is quite simple to do if you follow the following steps

  1. Add a row into a section and go to the  Row Settings > Design tab > Sizing > Equalize Column Heights option and change the option to YES
    equalize column heights setting
  2. In the Rows Settings > Content > open the Column Settings for your 1st column and go to  > Content > Background and set your background-color
    Divi column background color
  3. Right-Click on the Background-Color title you just set and click to Extend Column Styles.
    divi column backgrounds
  4. Your columns are now equal heights and background colors align on each module.
    equal column height

The video below is from an older version of Divi so the place to add background colors and settings are now different and are added on each column as in the process above. The video is still a good way to help you understand how the equalize column height is only affecting the columns and not modules with those columns.

4.3 6 votes
Article Rating

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close