What is equalizing column height?
When working on a page we might need to show multiple columns side by side. And when doing this we face issues of not looking as equal. We will discuss today making the columns equal, common mistakes we make during the process, and some frequently asked questions about it.
For example, in a row of three columns, we may have different kinds of content on each column that don’t look equal in height. Generally, it’s quite hard to make different texts or contents height the same in columns which may not look good to the visitors.
If we share an example of an uneven column then it will be more clear. Have a look at this image below where I have a text box to the left, an image and text box to the middle, and a call to action module to the right. If you see the bottom of this row then you will notice it’s not equal and doesn’t look good to users.
Now, if we want to make them equal then how should it look? Let me share an example of what an equalized column will look like. Have a look at the attached image below.
This revised look is much better than the one without equalizing column height.
How to Equalize Column Heights?
Now let’s back to the main point. How to make this work! We are coming to this now. 😀
We will do it in some steps. Let’s go.
I hope we are all familiar with how we can create a section and row in Divi builder. So, skipping that step for now. We will create a three columns row by choosing a regular section.
Now, we will see three columns to add content to them.
- One Text module to the first column with contents.
- One Image module and a text module to the second column.
- One Call To Action module to the third column.
The result will look something like the example below.
Now let’s get back to the real work of fixing this and making the columns equal.
We will need to remove the background colors of the modules first. We can see that the third column’s Call To Action module has a background color added. We will delete it by opening the Call To Action Settings > Content > Background option.
We will need to set a background color or a border or a box shadow to the column now. We will use background color for this tutorial. To open each of the three columns, we will need to open the Row Settings first since the columns are added inside the Row.
After opening each of the column settings, we will need to add a background color to the columns from the Column Settings > Content > Background option.
We will add the same background color (I chose #73bec5) code to all three columns.
Now, to make the columns look good with the background color we will add some Custom CSS. We will choose the padding option to space out the actual contents from the column. To do that, we will add some padding-left, padding-right, padding-top, and padding-bottom values from each Column Settings > Design > Spacing option. For demonstration purposes, let’s choose 30px for all those padding options. You can add any values you want but make sure to same values for all of those paddings so it looks equal.
Now, it will still not look as equal. The result will be something like this attached screenshot.
Step 5 (Final Step):
The steps with the columns are no longer needed to make them equal. Now, we will need to open the Row Settings > Design > Sizing option and enable the option Equalize Column Heights.
And now we will get the desired result we are looking for. The columns will be equal from the bottom to the top. And this will be the final result after adjusting colors for the two text modules from the first two columns.
Common Mistakes We Make During Making The Columns Equal:
- Equalizing column heights is a bit tricky to make work. We often do some mistakes while doing it. The most common mistake we make by adding the background color or border or box shadow to each of the modules instead of the columns.
- We need to make sure that the background color or border or box shadow is added to the columns and equalize column heights option is enabled from the Row Settings > Design > Sizing option.
- Also, we try to enable this equalize column heights option from the Row settings to make the Pricing Table Module and Blog Module’s grid columns equal which won’t work. We will discuss making those modules equal in height in a separate blog article.
- We often use height to the modules or rows to make them equal which can create issues on different screens. In short, we generally shouldn’t add any height values since the heights are calculated automatically.
Some Frequently Asked Questions About Equalize Column Height:
Q : Does it work on a tablet and mobile?
Answer: The option is introduced for making it work on the desktop since on tablets and mobile, the columns stack one after another. However, there is a workaround for it as well. We will discuss it later hopefully.
Q : Can we make it work without adding any design like background color, border, and box shadow to the columns?
Answer: The columns will be still equal after enabling Equalize Column Heights but it won’t look visually since we don’t have any border/background/box shadow.
Q : Is it responsive for all desktop screens?
Answer: Yes, it will be responsive for all desktop screens from 981px width to onwards.
Equalizing column heights is one of the necessary features in a website while working with multiple columns in a row. Divi made it easier by introducing the equalize column heights option in the Row settings. Feel free to reach me in the comments below if you are having issues implementing this.