When done correctly, equalizing column height will force all columns to assume the height of the tallest column in the row. All columns will have the same height, keeping their appearance uniform.
Activating the equalize column heights in your row setting may however not have the expected results as it only makes the columns equal heights and not the modules within those columns.
The mistake many Divi users make is to add a background color to the modules within their row, rather than adding the background color to the columns within the row itself. 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 suggest the equalize 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 equal heights in Divi is quite simple to do if you follow the following steps
- 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
- In the Rows Settings > Content > open the Column Settings for your 1st column and go to > Content > Background and set your background-color
- Right-Click on the Background-Color title you just set and click to Extend Column Styles.
- Your columns are now equal heights and background colors align on each module.
The video below is from an older version of Divi so the place to add background colors and set are now different and are added on each column as in the process above. There are also options within those column settings that let us add a border to the column using the inbuild Divi column options so we do not need any additional CSS. The video is still good to understand how the equalize column height is only effecting the columns and not modules with those columns.