Introduction

Divi is a WordPress theme with a Drag & Drop Page Builder. It’s one of the most popular WordPress themes in the world. Divi is easy to use and comes with plenty of features and options. You can use Divi to create any kind of website, from a simple blog to a complex eCommerce site. Here we are showing how to make divi blog equal height with using only CSS

Before:

Before Divi Blog Equal Height

After:

After Divi Blog Equal Height

Step 1:

Layout Design should be full width. Please confirm once.

Blog Module > Design > Layout choose full width

Divi Blog Equal Height – Step 1
Divi Blog Equal Height – Step – 1

Step 2:

We can achieve this via using only CSS. 

Customize > Additional CSS add below code

/*  Blog equal height*/

.et_pb_posts .et_pb_post {
    position: relative;flex-basis: calc(33.33% - 20px);margin: 10px;box-shadow: 0px 0px 4px 1px #00000030;    padding-bottom: 20px;}
.et_pb_ajax_pagination_container{display:flex;flex-wrap: wrap;}
.et_pb_posts .et_pb_post h2, .et_pb_posts .et_pb_post .post-meta, .et_pb_posts .et_pb_post .post-content{padding:0px 15px}
@media only screen and (max-width: 767px) {
  .et_pb_ajax_pagination_container{
   flex-direction:column
  }
}
Divi Blog Equal Height – Step 2 679x1024 1
Divi Blog Equal Height – Step – 2

That’s all…

Now save and refresh your blog

Conclusion

We really wanted to help you with some customization on Divi, Elementor, Shopify, WordPress and CSS. If you have any difficulties above topics contact us or Comments below we will fix on that and update you

Table of Contents