I love Divi’s blog module, and I think that the grid layout is fantastic out-of-the-box. And with a little styling, the grid can look extremely flash and provide an awesome user experience to your visitors. If you haven’t checked out my Blog Grid tutorial then take a look here!

** UPDATE: An updated version of the tutorial will be posted soon to reflect the new Module Settings in the recent Divi updates. The locations of module settings have moved but the tutorial should still work – if the recent Divi updates are affecting how you’ve followed this tutorial, please leave a comment. **

result

However, the Divi’s blog grid layout does have a limitation. When you have featured images of different sizes, and post titles/excerpts which are different lengths, it can cause the grid to look uneven – even with the ‘Equalize Column Heights’ option checked. For example:

blog grid heights

OCD NIGHTMARE. Fortunately, it only takes a short amount of CSS to fix this.

Click here for a live example of a blog grid with equalized heights.

Setting The Blog Grid Posts Heights

 

Firstly, let’s assume you’re using a single column layout with one Blog Module (below), set to a Grid layout.

grid2

 

Go to Blog Module Settings > Custom CSS and give the module the CSS Class “custom_blog”.

 

grid3

Update your page, and then head to Divi > Theme Options in your Dashboard.

 

Custom CSS

 

Add the following code to your Custom CSS box:


@media only screen and (min-width: 768px) {
.custom_blog .et_pb_post {
min-height: 580px;
max-height: 580px;
}
}

 

(The media query is set so that the CSS kicks in on desktops only. The grid layout displays vertically on mobiles anyway, and setting min/max heights can look strange on mobile devices)

Experiment with the values, as these can differ depending on your excerpt lengths, title lengths, font sizes, etc.

Save, and then check your blog layout. Your blog grid should now have equal heights!

blog grid heights

Awesome! We have equal heights, and our Divi designer OCD can be calmed. Simples!

 

Thanks as always for reading. If this has helped you, please leave a comment below and don’t forget to subscribe. If you’re really feeling generous, feel free to buy me a coffee – this blog is entirely free and written for the love of the Divi community!

Tim


BMC logoBuy me a coffee

You May Have Missed These...

The following two tabs change content below.
Founder of Inline|Creative and Digital Content Producer at IMG Artists. Freelance WordPress web designer, blogger, and musician.

Pin It on Pinterest

Share This