How To Make Divi Blog Equal Height [Only CSS]

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:

After:

Step 1:

Layout Design should be full width. Please confirm once.

Blog Module > Design > Layout choose full width

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
  }
}

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