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.
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
- 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 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.
Super helpful! I’ve been looking for this solution for days. Sheesh.
Thanks a lot!! Helps me very much!
Thanks, huge help.
This creates columns of the same colour, but still uneven height! :/
you are doing it wrong then. add the background colors to the columns, not to modules within the columns.
same problem. What are the columns?
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
This only equalizes the column background height. If the modules within have borders, they don’t drop to bottom. You need flexbox.
You can just put any borders you may need on the columns, which have the same border options as modules.
Thank you so much for the lin. it helps!
Oh dear!
always more than 1 way to skin a cat as they say.
super!
How do we do it for a gallery module?
Link to the page with the issue https://anutone.com/applications/mall/
Please see at bottom.
The text caption content lengths are different
How about the blog grid?
https://www.divithemeexamples.com/how-to-align-your-divi-blog-module-grid/ this should help.
Looking at some of the comments here it’s obvious that some need to learn some of the fundamentals of Divi.
yes, of course, we all start somewhere and there are a lot of things in Divi that may not be obvious first time around. hopefully this site is still helpful for those starting out with Divi 🙂