Equal Height Divi Blog Grid
How do I make the blog grid equal height? This is a very common question for Divi users setting up the Blog module. There are no other tutorials on this, so as always we though we should provide a great solution for this need. So in this tutorial, I will show you how to equalize the Divi Blog module grid height.
There is already a solution provided by Elegant Themes in their chat support help docs here: Blog Module equal height grid “boxes” with JavaScript. So credit goes to them for the original code, but we have improved it greatly and also will explain it much better than they do. We also include some bonus snippets, such as aligning the buttons to the bottom.
▶️ Please watch the video above to get all the exciting details! 👆
Add A Custom CSS Class To The Blog Module
Before getting to the actual code snippet, we first need to go to the Blog module that we want to make equal height and add a custom CSS class. This CSS class will allow us to target any particular Blog module where you want the equal height effect to take place, and will not affect any others. To add this, go to the Blog module settings to the Advanced tab and open the CSS ID & Classes toggle. There you should add the class “pa-blog-equal-height” to the CSS Class input field. This same class will then be used in the code snippet below to match and link the code to this module.
Add The jQuery Code
Now we come to the big part of the tutorial, the code that does all the work. This is jQuery and it is at first glance a bigger than usual snippet, but I will explain all of it clearly down below. For now, go ahead and get the code added to your website.
If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the “Add code to the < head > of your blog” code area.
<script>
(function ($) {
var pa_equalize_button_height = "true";
if (pa_equalize_button_height == "false") {
function pa_equalize_blog_post_height(blog) {
var articles = blog.find('article');
var heights = [];
articles.each(function () {
var height = 0;
height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
height += $(this).find('.entry-title').outerHeight(true);
height += ($(this).find('.post-meta').length != 0) ? $(this).find('.post-meta').outerHeight(true) : 0;
height += ($(this).find('.post-content').length != 0) ? $(this).find('.post-content').outerHeight(true) : 0;
heights.push(height);
});
var max_height = Math.max.apply(Math, heights);
articles.each(function () {
$(this).height(max_height);
});
}
} else {
function pa_equalize_blog_post_height(blog) {
var articles = blog.find('article');
var heights = [];
var btnheights = [];
articles.each(function () {
var height = 0;
var btnheight = 0;
var basebtnmargin = 20;
height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
height += $(this).find('.entry-title').outerHeight(true);
height += $(this).find('.post-meta').outerHeight(true);
height += $(this).find('.post-content').outerHeight(true);
btnheight += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
btnheight += $(this).find('.entry-title').outerHeight(true);
btnheight += $(this).find('.post-meta').outerHeight(true);
btnheight += $(this).find(".post-content p").outerHeight(true);
btnheight += basebtnmargin;
heights.push(height);
btnheights.push(btnheight);
});
var max_height = Math.max.apply(Math, heights);
var max_btn_height = Math.max.apply(Math, btnheights);
articles.each(function () {
$(this).height(max_height);
var eachheight = 0;
var eachbasebtnmargin = 20;
eachheight += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
eachheight += $(this).find('.entry-title').outerHeight(true);
eachheight += $(this).find('.post-meta').outerHeight(true);
eachheight += $(this).find(".post-content p").outerHeight(true);
eachheight += eachbasebtnmargin;
var requiredbtnmargin = (max_btn_height - eachheight) + eachbasebtnmargin;
$(this).find(".more-link").css("margin-top", requiredbtnmargin + "px");
});
}
}
$(document).ready(function () {
$(window).resize(function () {
if ($(this).width() >= 768) {
$(".pa-blog-equal-height article").each(function () {
$(this).removeClass("pa-auto-height");
$(this).find(".more-link").removeClass("pa-auto-margin");
})
$('.pa-blog-equal-height').each(function () {
pa_equalize_blog_post_height($(this));
});
$('.pa-blog-equal-height').each(function () {
var pa_blog = $(this);
pa_equalize_blog_post_height(pa_blog);
var observer = new MutationObserver(function (mutations) {
pa_equalize_blog_post_height(pa_blog);
});
var config = {
subtree: true,
childList: true
};
observer.observe(pa_blog[0], config);
});
$(document).ajaxComplete(function () {
$('.pa-blog-equal-height').imagesLoaded().then(function () {
$('.pa-blog-equal-height').each(function () {
pa_equalize_blog_post_height($(this));
});
});
});
$.fn.imagesLoaded = function () {
var $imgs = this.find('img[src!=""]');
var dfds = [];
if (!$imgs.length) {
return $.Deferred().resolve().promise();
}
$imgs.each(function () {
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function () {
dfd.resolve();
};
img.onerror = function () {
dfd.resolve();
};
img.src = this.src;
});
return $.when.apply($, dfds);
}
} else {
$(".pa-blog-equal-height article").each(function () {
$(this).addClass("pa-auto-height");
$(this).find(".more-link").addClass("pa-auto-margin");
})
}
});
});
})(jQuery);
</script>jQuery Code Explanation
I’ll do my best to explain what is happening in simple terms. You can totally skip this, but if you are wanting to understand it a little, read on.
Line 3
This line of code determines if you want to align the read more buttons to the bottom, or not. If this value if set to “true” then it will do some height calculations and align the buttons to the bottom, and if it is set to “false” then it will not.
Lines 5-71
This part of the code snippet controls the main equal height effect and is based on the true or false value in line 3. It includes two functions, one that equalizes the blog posts heights and aligns the read more button and one that just equalizes the blog heights. The effects will take place whenever the browser screen size changes.
If the value in line 3 is set to true, then the code will equalize both the blog post height and also align the read more button to the bottom.
If the value in line 3 is set to false, then the code will only equalize the blog post heights and not affect the button alignment.
In summary, this section of the code is doing the following things:
- It saves all the information about each of the blog posts in the Blog module.
- It processes the information and calculates the height of each post.
- It checks all of the heights and compares them to find the tallest one.
- It applies that same value to all the other posts.
- It adjusts the button top margin to make it aligned to the bottom (depending on true or false)
Lines 72-79
This part of the code snippet is used to limit the equal height affect to screen sizes that are only Desktop and Tablet devices 768px and above. There is no need to apply the effect on smaller screens since there is only one column of the blog module. If we did not add this part, it would look bad on Phone. This works by removing the two classes “pa-auto-height” and “pa-auto-margin” from the code so that the equal height effect does not apply on Phone.
Lines 85-100
This part of the code snippet is checking and observing each of the various elements of the individual posts inside the Blog module. If any slightest possible change occurs in any element of the module, it will run the function to equalize the heights or align the button margin.
Lines 102-136
This part of the code snippet is used to make sure that all of this works properly when ajax pagination is used. It checks to make sure the featured image is fully loaded and the ajax is finished running, then it applies the equal height function.
Lines 137-144
This part of the code snippet adds the custom CSS for screen sizes below 768px. This works by adding the two classes “pa-auto-height” and “pa-auto-margin” to the code so that we can adjust the equal height effect and button margin top on Phone.
Add The CSS Code
There are two snippets of CSS code that can be added next.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
.pa-blog-equal-height .pa-auto-height {
height: auto !important;
}
.pa-blog-equal-height .pa-auto-margin {
margin-top: 20px !important;
}In the jQuery snippet, we have added the custom class “pa-auto-height” which we will use now in the first part of the CSS snippet to remove the equalize height effect for screens below 768px.
We have also added the custom class “pa-auto-margin” which we will use in the second part of the CSS snippet to remove the automatic margin change and to provide a static margin-top value to all the buttons below 768px instead. You can change the value of margin as per your liking.
NOTE: In the jQuery snippet, there are two variables defined as “basebtnmargin” and “eachbasebtnmargin.” Both the margins are set to the value of 20. By default, Divi adds the margin-top of 20px to the more link button. If you happen to have changed the margin of the button in the design settings to some custom value then you need to update that same value in both of these variables in the jQuery for accurate results.
Alternative Method B: CSS Grid
After posting this, some people asked why we did not just use CSS Grid for this. It’s a fair question, but we did consider it and feel the above JavaScript method is usually better. Allow me to explain.
Considerations Before Choosing This Method
There are actually many reasons for me, but you are welcome to hold a different opinion. But for my followers, I provide what I feel is the best solution overall for them based on many factors and considerations. In this case, those are as follows:
1. The CSS Grid method requires the Blog module to be set to the Fullwidth layout which has less/limited design settings in the module, which means users will be forced to add more CSS to replace the missing design settings, which they may not know how to do.
2. The CSS Grid method requires the Blog module to be set to the Fullwidth layout which is not compatible with all other tutorial tricks and snippets for the Grid layout and this could break their layout and design.
3. The CSS Grid method loses the live Visual Builder preview, which can confuse users, looks bad, and also makes the page extremely long when working in the builder and is overall pretty hectic.
4. The CSS Grid properties are not recognized by the Divi Custom CSS editors and they throw errors. Even though these are false positives, they can alarm users, make them feel like the code broken, or that they are doing something wrong
5. The CSS Grid method requires you to manually set the number of columns and rows for different screen sizes. This is not easy for beginners and will be very confusing.
How To Use The CSS Grid Method
You can proceed by adding the CSS class “pa-blog-equal-height” to the blog module just like we showed with the JS method above.
Make sure you set the Blog layout to Fullwidth instead of Grid.
After that, you can just add the following CSS to your website.
.pa-blog-equal-height .et_pb_ajax_pagination_container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
column-gap: 0.8em
}
.pa-blog-equal-height .et_pb_ajax_pagination_container article {
padding: 1em;
border-radius: 10px;
border: 2px solid blue
}
.pa-blog-equal-height .et_pb_ajax_pagination_container div {
grid-column: 1 / -1;
}
.pa-blog-equal-height .et_pb_post div.post-content a.more-link {
position: absolute;
bottom: 30px
}
.pa-blog-equal-height .post-content {
padding-bottom: 4.5em;
}
@media all and (max-width: 980px) {
.pa-blog-equal-height .et_pb_ajax_pagination_container {
grid-template-columns: repeat(2, 1fr);
}
}
@media all and (max-width: 768px) {
.pa-blog-equal-height .et_pb_ajax_pagination_container {
grid-template-columns: repeat(1, 1fr);
}
}
hi Nelson, thanks for your tutorial, I followed it slavishly, but, for some reason unknown to me, it doesn’t work, I don’t know what to do
You are welcome to share what you have tried and other details.
Hi Nelson,
it works on my windows PC but on macbooks it looks like this:
https://scontent-prg1-1.xx.fbcdn.net/v/t1.15752-9/220772762_235790468382002_2366919557978345808_n.jpg?_nc_cat=100&ccb=1-3&_nc_sid=ae9488&_nc_ohc=w4PjkFOcPpAAX-LfNGp&_nc_ht=scontent-prg1-1.xx&oh=3effcd5afa464334316e0e1500f917a8&oe=60FCD7F3
what went wrong?
Hi Mark,
The URL that you have provided is not working. Could you please provide us the valid URL so that we can investigate further?
Hi, I’ve tried it as well and it doesn’t work for my website. When I set module to Grid and use colde with 3 columns it’s making 4-5 very long and bad looking colums, when I use it to full-width and uses code for 3 columns there are 3 but very messy (for ex. one post had a picture on the bottom od 1st column and the text with button was in 2nd column). I tried many times and it don’t want to work. Tried to use second method but when I paste code it says “expected RBRACE…”
Tried even codes from your another post to set the post on equal height but it’s not working at all. I’m out of ideas 🙁
Could you please share the URL of the page where the blog module is present so that I can investigate further?
I have actually run through a few tutorials and was making pretty good progress until I applied the equal height code to it. I first added the button to the blog module. Next I used the tutorial to add 4 blog posts along with your style to change the background so it had the grey box around each post. Everything looked good up to this point.
My final step was adding all the code to equalize the heights. When I tried that it did equalize them, but the gray background around each post doesn’t extend to the bottom of the post. Plus the button disappeared off the second post.
I went through and checked everything to make sure I have followed each tutorial correctly so I am not sure what I am doing wrong. I might have to back out the equal height stuff if I can’t resolve it because it looks terrible the way it is now.
Any idea where I should search to see if I have a mistake somewhere?
So playing around I discovered that I remove the tutorial about making it a grid of 4 blog post and go back to the standard 3 blog posts it seems to work at equaling the height, but it still removes the cool styling of the grey background box around each post. I am wondering if something is creating a conflict with the equal height and the grid of 4 blog posts. That is what it seems is happening, but I can’t be totally sure.
Hey Mike, I’m trying to do achieve the same thing on my website: 4 columns blogpost grid with equalised height… Followed this article, spent a couple hours playing with this, but couldn’t figure it out how to make it. It’s just so annoying, it should’ve been an easy mod, instead wasting time and effort to solve s simple stuff like this. If you have found the Holy Grail, pls let us know! 🙂 Cheerz!
Could you please share the URL of the page where you are facing this conflict?
When I add the code it says “Special characters must be escaped”.
How can this be adjusted?
Thanks a lot!
Hi Kirsten,
This is weird as I cannot replicate the same issue on my end so could you please elaborate on the steps you are doing that are leading you to this error?
Hi Nelson,
Very useful snippet thanks!
It works for me except that the read more button does not align to the bottom whether line three is set to true or false.
I don’t know enough about JS to figure out what could be wrong though.
At first I used a code module on the page that has my blog module for the JS and I added the CSS to my page CSS, so not using the integration or Divi’s theme options CSS.
Then I tried it your recommended way and I still can’t get the read more to align to the bottom of the post block.
Any idea as to why I would be struggling with this?
Hi Hurri
Could you please share the URL of the page where you are facing this issue for me to investigate further?
Hi Hemant,
I have the same issue as Hurri, my buttons do not align at the bottom.
https://uwin.sybergrupe.co.za/uwin-blog/
Please can you assist?
Hi Amelia,
Thank you for addressing the issue. We will check where this issue is coming from and get back on this.
Hi, Great tutorial as always, but I can’t quite get it to work. I created a template for news articles and copied the CSS, Javascript, and CSS code to their appropriate places as described in the tutorial, but it appears that only the blog heights are being made equal. The buttons are not lining up as expected, even though line 3 of the javascript code is set to ‘true’.
Additionally, on tablet versions, there is a larger gap between blogs 1 and 2 than blogs 2 and 3.
https://myevopt.com/mbta-and-enel-x-selects-microgrid-labs-for-bus-electrification/ under “RECENT EVOPT NEWS”
Hi Reed,
Thank you for addressing the issue. We will check where the issue is coming from and will get back on this.
Hi- This mostly worked for me however it is causing some of the images to stretch in a weird way which I don’t think is supposed to happen. Perhaps this is due to some of the other customizations I already have on the blog page? Any suggestions?
Hey Jen,
I am not able to access the website as it is asking for the password. Could you please remove this security step for me to investigate further?
Hello and thank you very much for this tutorial. From my side, it works on the Blog module on the website. On the other hand, this does not work for the blog module “Similar articles” in the Theme Builder.
Do you have any idea what’s stuck?
Example URL: https://www.ap1170.org/vendredi-20-aout-61e-jour/
Thank you for your help !
I found the problem. I had activated the option “Show an extract”. By disabling this option, your trick worked. Thank you !
Hey Jeremy,
Glad to hear that the problem is solved now.
Let us know if you have any other query. 🙂
Hi, thanks for the tutorials. This one was working at first but now it is not working on my site. Any help would be greatly appreciated. Maybe the latest divi update broke it, but I can’t be sure. I’ve tried debugging by deactivating plugins, etc to no avail. If you email me, I’d be happy to give you logins to check out the issue, as its a development site that can’t be accessed without a login.
Hi Nelson
Thank you so much for all these great tutorials you have. I have used so many of them and they work great.
Do you perhaps have this tutorial but applied to the Divi Shop Module?
Could this be done. I tried it on the Shop Module without success.
Thanks again.
Cheers for now.
Hi Dieter,
I am afraid that the code in the guide is for the blog module and not for the shop module. We will definitely look into the issue and will get back on this shortly.
Hello,
A year has passed but the issue is still actual – could you please rewrite the code for the divi shop module, please?
That’s a totally different concept from this, so it’s not relevant. And there no longer is a shop module 😉
Hi there, thank you for the great tutorial.
For some reason it does not work with my clients website.
https://neios.nl/europa-actueel/werkbladen/
you have any ideas what I am doing wrong?
Cheers, Leroy
@leroy maybe it is because you don’t have any of the meta data enabled. That is my problem, I don’t want to display any meta data. Just the Image, title, excerpt, and button. It doesn’t work for me unless I have one of the other options also enabled.
Thanks Adam solved my issue – yes, you’re right it only works with meta data enabled.
Great tutorial! It works if I have post meta enabled, but as soon as I disable showing the date, author, category, etc… the class=”post-meta” div no longer shows… thus breaking the code. Is there a way to get the script to work even if there isn’t a post-meta div?
Love your work but this one is not working for me. I use a custom post where I added custom fields in the blog layout, here: https://tvde.nl/vacatures/
Doesn’t equalize the heights. Any suggestions?
Hi Boudewijn,
Our tutorial works fine as described, unfortunately it would see your customizations are not compatible.
Hi Nelson,
This is a great solution.
But I just cannot get it to work as per your demo.
See https://getwedo.today/press/
Additionally the featured images are all square 1:1. But they are being squashed into 16:9
Any ideas where I might be going wrong?
Thanks
I upload this in an extra layout and it says below message any idea
The snippet has been deactivated due to an error on line 28:
var articles = blog.find(‘article’);
Cannot redeclare function pa_equalize_blog_post_height.
Yip me too…
Hi Nelson,
Hi Nelson,
I managed to use your code succesfully, except for one little error. There is a huge space below the read more link that immediately disappears as soon as I try to check it with the Crome DevTools. Ckeck the screenshoots pls:
https://snipboard.io/NiSoHd.jpg
https://snipboard.io/6YQ4AZ.jpg
Thanks
The space is most likely because of the intended outcome – equalizing the posts. Is that not correct? And you won’t find it in the CSS because it is using JavaScript.
Probably that is the case. But what can I do about it?
Can you clarify the question? Perhaps you mean to reply to another comment?
Just take a look at the screenshot pls. There is a huge space below the Read more link. Since I have only these two colomns in my blog and the contents are about the same length, this is unnecessary. Interesting fact that as soon as I start inspecting with Chrome DevTools, it disappeares.
But the most interesting thing is, that the whole phenomenon is gone by now. Crazy! 🙂
I see no issues at all at your link. Furthermore, if you only have consistent blog posts, then don’t use the tutorial. Also, you keep replying to the wrong comment, making it very difficult to provide a proper response. What we see in the backend of comment replies has literally no context unless you reply to the correct comment.
Aligning the content is fine, but buttons are not alligned. When i change from true to false nothing happend and every button is showing randomly (like default without this code)
Hey Dimitar,
Could you please provide the URL of the page for me to investigate further?
In the situation from january i restore 1 week backup. Yesterday i see thath the problem is here again.
Website is https://pmg-haskovo.org
Hi,
Thank you for this tutorial. It works as intended, but only when the show author element is enabled. Is there a way for this to work without enabling author? I need to display the blog without meta date. Thank you!
Hi, great post to a simple solution.
I have the same problem that Nelson had above. There seems to be an extra lot of space below the “read more” text.
I have tried all sorts of different configurations in the blog module to show and hide meta and excerpts. But nothing seems to change it.
It looks ok in the divi visual editor but when I save and exit the visual editor the space comes back.
Any ideas?
Hi Nelson,
Your tutorials are always a treasure for me!
In the 3rd line of the grid, the buttons aren’t aligned in the bottom
https://www.antisel-physio.gr/new/category/products/physiotherapy-tables/
Could you please help me??
Hi Agathonikos
I have checked the site and I am afraid I am not able to replicate the issue on my end. Could you check it once and let me know if you’re still facing the facingissue?
Hi Hemant,
I re-apply the method and I had the same problem 🙁
This is a great tutorial and works extremely well on the several sites I have added it to. I would like to know if the is any way it can be used in conjunction with the “How to change the number of columns” tutorial?
(ref: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-change-the-number-of-columns-in-the-divi-blog-module/)
Probably not as that other tutorial is totally different using a different blog layout.
Well I tried what you recommended in this post and it did not work. Then I tried the one from divi. This one worked, except the titles and the read more button buttons do not align. I went back and forth with the divi help. I added some code where they told me to do it. Finally I got a perfect preview, except the published page looks nothing like the preview. In the end divi told me, “I’m afraid that the Blog Module was never intended to have the same size for each column (post)…” Now I’m stuck. How can I sign up to have you guys fix this. I am self taught and not a web developer. It is for a new home page on the site which is for my own business.
This script prevents WPML from syncing different language versions of the page that has the blog element.
To test: Set up this code as instructed on an existing Divi page, on the parent language version, with an existing translation version in WPML. (Also set up the script and custom CSS of course). Make some other changes to other elements on the page too, like changing a background color. Save the page. In the Pages view in WP, click the Sync icon to sync the translated version. View the translated page. The visual editing changes will not be synced. Delete the script from the Divi theme options. Recheck the translated page. Now the changes will have synced.
Hi Nelson,
Please check if the jQuery function that makes the buttons aligned to the bottom is still working.
I tried it on my website and it didn’t align the buttons. Not sure if I’m doing it wrong or it’s not working.
Love your job and tutorials, stay safe and healthy!
Thank you,
Peter
Hi Nelson, this tutorial works great! Except two things: I have to use the grid layout without meta-data. When I remove them, the equal height does not work. Is there a solution for this?
And I can’t put the read more Button to the end.
https://neu-ds.kj-immo.de/schritte-bis-zum-immobilienkauf/
Just found this one: https://intercom.help/elegantthemes/en/articles/3371227-blog-module-equal-height-grid-boxes-with-javascript
Seems to work, but I didn’t compare the code to see what is diffrent.
I also am not able to get the buttons to align at the bottom (although the equalising of the heights does work). Is there a resolutions for this please?
https://wow.ijlwebsolutions.com/news/
Hey Ian,
The code is working fine, I guess you forgot to add the CSS code. Could you please go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the code given below :
.pa-blog-equal-height .et_pb_ajax_pagination_container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
column-gap: 0.8em
}
.pa-blog-equal-height .et_pb_ajax_pagination_container article {
padding: 1em;
border-radius: 10px;
position: relative;
}
.pa-blog-equal-height .et_pb_ajax_pagination_container div {
grid-column: 1 / -1;
}
.pa-blog-equal-height .et_pb_post div.post-content a.more-link {
position: absolute;
bottom: 0px
}
.pa-blog-equal-height .post-content {
padding-bottom: 4.5em;
}
@media all and (max-width: 980px) {
.pa-blog-equal-height .et_pb_ajax_pagination_container {
grid-template-columns: repeat(2, 1fr);
}
}
@media all and (max-width: 768px) {
.pa-blog-equal-height .et_pb_ajax_pagination_container {
grid-template-columns: repeat(1, 1fr);
}
}
Let me know how it goes.
Awesome straight forward tutorial, thanks!
Would be super keen to know if there is any tweak to make it a 2 column layout, instead of 3? What fixes I can find, don’t work with your method. Would love to find a solution. Thanks 🙂
Hey Tara,
Will try this 2 column layout implementation on our end and after finalizing it, will get back to you.
Hi!
Your code is not working for me, can you help?
Thanks.
Hey Abu,
Could you please elaborate the issue that you facing and provide the URL of the website as well?
Hi,
I’m getting a similar issue to Zoltan, there is a large white space below the excerpt/read more link. I would expect this if one of the posts was much larger than all the others but every post has this additional space at the bottom.
I think the issue could be to do with CSS styles not finishing loading before the JS runs. The page loads too quick to easily check this however… I tried the performance tab in the Dev console but I’ll be honest, I’m not that good with it 😅
My suspicion is one of the article elements, maybe a title for example, is loaded with a much larger font size and is then overwritten to be smaller but before it’s overwritten the JS has already logged the height of the element and styled the articles for that height and not the new height?
I should also note that upon resizing the page the function runs as intended and the articles all snap to the height of the tallest article.
I hope that makes sense?
Would it be possible to delay the JS from running until all CSS is loaded? Assuming you agree that this is the issue?
Thanks,
Josh
Experiencing the same issue Josh describes and have the same question:
Would it be possible to delay the JS from running until all CSS is loaded?
Hi Josh, I have a similar problem. Was it solved somehow?
Hello – does this solution only work if you are using the grid layout for the blog module? Thank you.
Yes, that’s the only way it would be needed…right?
Hi Nelson,
thank you for the great tutorial✌️
I think that I have same problem with the read more or the btn read more, they are not aligned in the bottom.
please do you have any solution?
Thanks in Advance
https://www.cvworld.in/how-to-make-divi-blog-equal-height/
Hi Check. here we using only css
Hi I tried this and setup everything with a DIvi Child theme but I can’t seem to get it to work.
I placed the css custom class and added the other information to the things you said and I still can’t get it to work here is the page https://newsite.3rdcoastbooks.com/3rd-coast-books-blog-post
Any ideas suggestions of what I could be doing incorrectly?
Hi.
Thanks for some great guides!
I see there is a lot of comments going a year back, regarding that the boxes is equal heights, but the “read more” buttons is not aligned.
Did you find a way to fix this issue? I have the same issue.
Thanks.
Hey Nelson, the Divi Teacher…
Did exactly what I was wanting to do, thank you for the post,
the”quotes” threw me tho…but I figured it out when it didnt work the first time…lol
Damo
In Version: 4.17.6 it stopped working
Nelson — I”m new to Divi, attempting to rebuild a legacy web site/blog, learning my way through your tutorials. Thank you. I’m trying to make your tutorial work — https://wordpress-292293-1617718.cloudwaysapps.com/how-to-make-the-divi-blog-grid-equal-height/ — while also following instructions from elegantthemes to get 5 columns, not the default 3. I’ve got the five columns working. Good. I’ve got equal height posts. Good. But .. the read more button floats all over the place, and the text/meta that comprise each post does not adhere to the excerpt character count limits I try — 270, 200, 100. Here’s the test page I’m slogging away at — https://sandbox.leonhouse.com/ . Is there a way to set a standard height for each post? The model for this in my head is https://blog.buildllc.com/. In advance, much and many thanks. I look forward to a gentle whack across the head by way of css …
Hey Steve,
The URLs have shared are not on Divi and this guide is for Divi users only.
I’ve found the extra white space problem too, is there any way to solve it?
It all seems to be great at first, but after refreshing the page 2 times, it the space returns
Hey Jean,
Could you please share the URL of the page for me to investigate it further?
Hi,
I have the same problem. You can see it on the Landing page in the section NOVICE & REFERENCE. When the page is loaded for the fist time it has big space, when I refresh the page, the space is gone. If you can’t s see the problem, just try to close Chrome tab and reopen the page.
If I resize the window the spaces are also gone, I think that is because of the browser refreshing.
URL: https://teknol.si/
Hi Hemant,
Is this issue solved? I am having the same issue. I will send you the URL. Sometime white space, sometimes not. I noticed in works well in Wiindows 10 Chrome. But you see always white space under the posts in Firefox
Hi there!
We’re not able to replicate the issue at our end. It could be happening due to cache plugin. Can you please disable the cache plugin and make a few tests?
Do you have something similar to this for the Divi Woo Products Module?
I was thinking it was not a problem in that module, is it?
Works great on regular post types…
for some reason (CSS I imagine) it brakes on video post types…
https://kadiska.com/learn/resources/webinars/
Any ideas how to fix?
I’ve tried this on two different client sites and cannot get it to work. When I use the original post from elegant themes, it works. But I really love how you made the read more button align with the bottom of the box, and the Elegant Themes version does not accomplish this. I have re-tried at least 4 times each site, and it just won’t work. I don’t know what I could be doing wrong.
I am not sure, but since the other one works I guess I can only recommend using the one that works well for you.
Hi, great tutorial. Like a few people above. I also have a large whit space below the read me button. The crazy part is. Sometimes it is there. And Sometimes now. Refreshing the page sometimes shows the large white space. Is there a way to reduce the space below the readme button? And to make the space consistent the same size after refresh?
Best regards
Hi Impulse!
Please try disabling the Defer jQuery And jQuery Migrate option in Performance and check again.
There must be a trick to get the buttons to align at the bottom that I am not seeing. The excerpt is set to a defined number of characters, but one or two of the text areas seem to be a line longer than the others. The outline of the column aligns correctly, but I need the button to be at the bottom of the column and not directly under the text. How do I fix that. Test site is located at https://pellatesting.com/ericrecker/
Hi Lesli!
I’m not able to access the page due to coming soon mode enabled. Can you please disable it so that I can check further?
Hi Nelson – I can’t seem to get the Read More to align at the bottom, and I also can’t seem to find where I can adjust the padding of the blogs. I was able to get the Read More to align by adding position: absolute, but that puts them outside of the background of the blog. Any ideas on what I need to address this?
Here’s what I’m working on if you care to have a look. It’s the 3-blog grid toward the bottom of the page.
https://hballpdev.wpengine.com/
Hi Nelson – I needed to add this to bottom align the read mores:
@media screen and (min-width: 981px) {
.et_pb_module.et_pb_blog_grid_wrapper .more-link {
position: absolute;
bottom: 31px;
left: 0;
right: 0;
width: 16vw;
margin: auto;
}
.et_pb_module.et_pb_blog_grid_wrapper .et_pb_post {
position: relative;
}
.et_pb_module.et_pb_blog_grid_wrapper .post-content {
padding-bottom: 80px;
}
}
Hello Sean!
I looked at the website. In both the desktop and mobile views, it works fine.
On the tablet view, only I can see the issue. Could you please go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the code given below :
@media (min-width: 768px) and (max-width: 980px){
.pa-blog-equal-height .et_pb_ajax_pagination_container article {
padding: 1em !important;
position: relative !important;
}
.pa-blog-equal-height .et_pb_ajax_pagination_container div {
grid-column: 1 / -1 !important;
}
.pa-blog-equal-height .et_pb_post div.post-content a.more-link {
position: absolute !important;
bottom: 10px !important;
}
.pa-blog-equal-height .post-content {
padding-bottom: 4.5em !important;
}
}
Let me know how it goes.
Hi, as many others the read more button is not aligned to the bottom and I can´t see any solution that works. Have you got one? https://indigoklubben.se/nyheter/
Hi Eva!
Thank you for the feedback. We will check again and make the changes needed. For now, please add the following code to align the buttons at the bottom:
.pa-blog-equal-height .et_pb_post{
position: relative;
}
.pa-blog-equal-height a.more-link{
position: absolute;
bottom: 0;
margin-bottom: 15px;
}
Let me know how it goes.
Hey Nelson! Thanks for this and all of the wildly helpful tutorials you create!
I’m having trouble getting this one to work for me, and have followed it start-to-finish and again at least 4 times, but I must be missing something. I’ve got the class assigned, CSS input, and JS input as well. Even tried Safe Mode to see if it was a plugin conflict. No dice. I think I must be missing something obvious. Any recommendations? The blog module can be found on this page https://laura.heartandhustlestudio.com/spaces/ .
Hi Corine!
I’m not able to access the page due to coming soon mode enabled. Can you please disable it so that I can check further? Also, can you please check if there is any JS error in console?
I’m trying to apply this to a Divi Machine ‘Archive Loop Module’ instead of a ‘Blog Settings Module’ but it doesn’t work. Any thoughts?
Hi Some1!
The solution is just suitable for other Divi Blog module. However, we will consider providing solutions for third party modules as well in our upcoming guides.
Thank you!
Hi,
first of all, thank you very much for this tutorial and all the work done!
I have a problem with this tutorial.
The button is securely attached to the bottom of the blog card, but the heights don’t adjust.
Since I want to have 4 columns, I followed this tutorial ( https://help.elegantthemes.com/en/articles/2310880-change-blog-module-columns-number), when the CSS of this tutorial is active, height adjustment does not work. When I turn it off, everything works fine but I end up with 2 columns. would there be an adjustment to make to your code to have 4 columns?
Thank you very much!
Hi Quentin!
Both the guides should work together. The grid equal height works when on changing the column number. Could you please share the URL of the page for me to investigate it further?
Hi!
thank you for your answer. For now I’m working localy so I can’t share the URL, but I can describe a weird behaviour. When I use “Inspector” with Chrome, and “Responsiv mod” is on, everything works well. But then, if I push F5 and refresh the page, the equal colonne height breaks (but not the button stuck to the bottom).. Does it help to understand?
Hi Hemant,
here is the page with the problem:
https://wp.preprod.ciffco.com/?page_id=1971
Thanks!
Can you please try disabling all the plugins manually and check again?
Hi Hermant,
thanks for your answers.
The page is now accessible here: https://wp.preprod.ciffco.com/page-de-tests-technique/
If you have a solution..
Have a nice day!
The page seems to be blank. Have you removed the Blog module from it?
Unfortunately this great solution does not seem to work for Custom Post Types (CPT), right? Boudewijn’s question and your answer are not really clear to me.
Thanks!
Hi Frank!
Our solution works fine for CPTs as well. Could you please share the URL of the page for me to investigate it further?
We’ve used this method on other sites (thank you!), but cannot get it to work on this one – https://wt026558547.mywtdivi2.com (under News & Announcements). What are we missing?
Hi Justin!
I can see something is blocking the script to work. Try disabling all the plugins manually and check again. If that doesn’t work, contact Elegant theme support and ask them to check remotely.
Works great for me. Thanks for this tutorial. Does this work equally well on the Events Module?
Our events module is totally separate and has the feature built-in.
Please ignore my last comment. I found the issue, I didn’t realise that we need to add the CSS code at the very bottom of the post. I thought this was just for the 2nd method, but this appears to enable to “read more” to line up for the 1st method as well. Also, this doesn’t work if enough elements are selected to show, for some reason. So I selected one then hid it with CSS, and it then seemed to work!
Good morning,
I’m testing your code to solve this very painful Divi problem.
But I have no results…
Would there be a change due to a Divi update? (for example)
Thanks in advance 🙂
Hi Fabrice!
Could you please share the URL of the page for me to investigate it further?
Hi Nelson
I added the code as suggested and the blog section of the page is great, but the rest of the page has gone completely crazy.
I have lost my banner header with the background image and the text overlay and also lost my call to action.
The only thing that is showing is the logo image, added with an image module.
When I am editing the page it is all there, when I view it online it is all gone
Any ideas?
Regards, Tony E.
P.S. the site has a temporary domain and will go live this Friday but this link should work until then. After that, the “tonyecuyer” will be removed from the URL, although if I have not resolved this issue by then I will probably need to remove the code.
Our code is isolated to the class selector and could not affect other items on the page, so I think there is some other issue happening.
I used the Css/Grid method because the other method put my Read More buttons below the bottom border on some posts in the blog roll.
But… I am seeing these errors in the custom css — there are several (See this screengrab https://www.screencast.com/t/QsdcWBfKtE)
How can those be fixed?
The page is here: https://faithfull.blog/blog/
Hi Carol!
Thank you for bringing the issue to our attention. I’ll check further and update the guide. For now, please contact the Elegant themes support and ask for an alternative solution.
Hi Nelson, the Divi Guru! Your guidance hit the mark perfectly.
Thank you for the insightful post; it’s exactly what I needed!
Following the tutorial on MaduraiMART (https://maduraimart.in/), I found that when the tutorial’s CSS is activated, the height adjustment feature functions effectively. Great resource!
I adopted the CSS/Grid approach as it optimally positions the ‘Read More’ buttons within the border in various blog posts, enhancing the blog roll’s overall aesthetic.
Thank you so much 😊 💕
I’m so glad you enjoyed this resource!
For anyone who wants to use this code without the post-meta (author, date, etc). I removed all of the lines that contain .post-meta and it works perfectly!
Thanks for sharing!
Hey Nelson,
Thanks a lot for your tutorial. Any idea if it’s possible to combine this tutorial plus a “load more” buttons on the blog page. After many try, the new articles that loads doesn’t take in consideration the height.. Didn’t manage to find a solution so far.
Have a nice day,
Guillaume
Hi Guilaume!
We will look into the issue further. Thank you for letting us know!
Hi Nelson
Thank you so much for all these great tutorials you have. I have used so many of them and they work great.
The page is here: https://anoosecopack.com/
Hi Saritha!
Thank you very much! do you need any assistance with the page?
Not working for me 🙁
Hi Lisa!
Could you please share the URL of the page for me to investigate it further?
Heya, great content!
Is there a way to account for different title or excerpt lengths? For example, if one of my titles runs into 3 lines instead of 2, it still shifts everything down.
Yes, that is what this tutorial is about.
Thanks so much – great stuff!
You’re welcome, glad you like it!
Hello,
Thanks, it is working for the first page of the module, but when I go to the previous entries, the spacing between lines seems gigantic. How can I solve it ?
Example : https://bit.ly/3Q5Depu
Best regards,
Baptiste
Hi Herve!
I’m not able to access the site due to Maintenence mode being enabled. Please disable it so that I can check further.
Was a solution ever found for the read more buttons not aligning to the bottom?
Here’s where I am having the issue – https://anjasmith.co.za/articles/
Hi Fanus!
It seems you have removed the above CSS. Please add it again and then add the following CSS along with it.
.pa-blog-equal-height .post-content {
position: relative;
}
Hope it helps!
Every problem I run into with Divi and Google an answer I always end up here! Thanks!
That’s awesome William! Be sure to let me know any future ideas when you don’t show up here!