Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Make The Divi Blog Grid Equal Height

Nelson Miller Profile Orange
In this tutorial, I will show you how to equalize the height of the Divi Blog module grid "boxes" with a few extra bonuses.

▶️ 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:

  1. It saves all the information about each of the blog posts in the Blog module.
  2. It processes the information and calculates the height of each post.
  3. It checks all of the heights and compares them to find the tallest one.
  4. It applies that same value to all the other posts.
  5. 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);
	}
}
Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

152 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. William Hourihan <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    Every problem I run into with Divi and Google an answer I always end up here! Thanks!

    Reply
  2. John Sharkey <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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!

    Reply
  3. Sean Callanan <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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/

    Reply
    • Hemant Gaba

      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.

      Reply
    • Sean Callanan <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

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

      Reply
  4. Reed <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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”

    Reply
    • Hemant Gaba

      Hi Reed,

      Thank you for addressing the issue. We will check where the issue is coming from and will get back on this.

      Reply
  5. Hurri <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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?

    Reply
    • Hemant Gaba

      Hi Hurri

      Could you please share the URL of the page where you are facing this issue for me to investigate further?

      Reply
      • Hemant Gaba

        Hi Amelia,

        Thank you for addressing the issue. We will check where this issue is coming from and get back on this.

Comments By Others

  1. von

    Hi! I’ve followed the steps but it seems that it doesn’t work on my end, after making the changes I tried clearing the cache at well, but it doesn’t work, what’s could possibly go wrong? Thanks

    Reply
    • Hemant Gaba

      Hi Von

      Can you please share the URL of the page to check further?

      Reply
  2. Patrick Fisher

    Sometimes there’s a large bottom margin, but if I refresh the page or use the inspect then it appears correctly. I appreciate any advice you may provide. Also, thanks for sharing this code, it’s super helpful!

    Reply
    • Hemant Gaba

      Hi Patrick!

      It seems to be happening due to the cache plugin. Try disabling it and see if it helps.

      Reply
  3. Melanie Votaw

    Hi! We’ve implemented the code (with a different css class – since the blog module already had one applied when I came to help the site owner – and changed out the class in the JQuery Code) in a couple of places and it works great! However, I found a bug where it wasn’t working in all locations, and the difference is that when I turn off “Show Authors”, the boxes do not align. But when I have “Show Authors” on, they do. Ideally, we’d like to hide the authors. Do you have a recommendation? Is there a change we can make in the code? Unfortunately I can’t share a URL as we’re testing on a staging site. But I can share screenshots. Thanks!

    Reply
    • Hemant Gaba

      Hi Melanie!

      I have checked and the code is working fine both with “author” option enabled or disabled. Can you please disable the “show author” option and share the URL of the page with me?

      Reply
  4. Justin Near

    We’ve used this successfully many times (thank you!!), but it’s not working on https://tlpca.net/student-resources-test/ (password: peeaye). I’m not seeing the pa-auto-height class. The only thing that’s different that I know of is that the posts are a “video” format instead of “standard.” Thoughts?

    Reply
    • Hemant Gaba

      Hi Justin!

      The code is not optimized for video format as of now. We’ll update the code soon.

      Reply
  5. Tony Ecuyer

    Hi Nelson
    I don’t seem to be able to get this to work. All the Blog Posts are the same size but the read more button is at the top.
    (This appears to be similar to a number of other comments, however, they said when they enabled the Meta Data it all worked, unfortunately I have done that and it still does not align the read more buttons.)
    This is my page: https://esfapprenticeships.co.uk/about-us/latest-apprenticeship-news/
    I have not included the long piece off CSS code that was there for the “Alternative Method B”. I have just put the shorter piece of CSS code in.
    This one
    .pa-blog-equal-height .pa-auto-height {
    height: auto !important;
    }

    .pa-blog-equal-height .pa-auto-margin {
    margin-top: 20px !important;
    }

    Any thoughts or ideas of what I may have done wrong?
    Thanks
    Tony E.

    Reply
    • Hemant Gaba

      Hi Tony!

      I can see the “read more” button is aligned fine now. I’m considering the issue resolved.

      Reply
  6. Fanus van Straten

    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/

    Reply
    • Hemant Gaba

      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!

      Reply
  7. Hervé Baptin

    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

    Reply
    • Hemant Gaba

      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.

      Reply
  8. Nat

    Thanks so much – great stuff!

    Reply
  9. Lincoln Schaefer

    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.

    Reply
  10. Lisa

    Not working for me 🙁

    Reply
    • Hemant Gaba

      Hi Lisa!

      Could you please share the URL of the page for me to investigate it further?

      Reply
    • Hemant Gaba

      Hi Saritha!

      Thank you very much! do you need any assistance with the page?

      Reply
  11. Guillaume

    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

    Reply
    • Hemant Gaba

      Hi Guilaume!

      We will look into the issue further. Thank you for letting us know!

      Reply
  12. Dan Gracey

    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!

    Reply
  13. Akshara Sri

    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 😊 💕

    Reply
  14. Carol Lamoreaux

    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/

    Reply
    • Hemant Gaba

      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.

      Reply
  15. Tony Ecuyer

    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.

    Reply
  16. Fabrice

    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 🙂

    Reply
    • Hemant Gaba

      Hi Fabrice!

      Could you please share the URL of the page for me to investigate it further?

      Reply
  17. Eric Salsbery

    Works great for me. Thanks for this tutorial. Does this work equally well on the Events Module?

    Reply
  18. Justin

    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?

    Reply
    • Hemant Gaba

      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.

      Reply
  19. Frank J.

    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!

    Reply
    • Hemant Gaba

      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?

      Reply
  20. Quentin

    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!

    Reply
    • Hemant Gaba

      The page seems to be blank. Have you removed the Blog module from it?

      Reply
    • Hemant Gaba

      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?

      Reply
      • Hemant Gaba

        Can you please try disabling all the plugins manually and check again?

      • Quentin

        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?

  21. Some1

    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?

    Reply
    • Hemant Gaba

      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!

      Reply
  22. Hemant Gaba

    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?

    Reply
  23. Corine Pettit

    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/ .

    Reply
  24. Eva

    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/

    Reply
    • Hemant Gaba

      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.

      Reply
  25. Lesli Nelson

    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/

    Reply
    • Hemant Gaba

      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?

      Reply
  26. impulse

    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

    Reply
    • Hemant Gaba

      Hi Impulse!

      Please try disabling the Defer jQuery And jQuery Migrate option in Performance and check again.

      Reply
  27. Stacie Benefield

    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.

    Reply
  28. Jordan

    Do you have something similar to this for the Divi Woo Products Module?

    Reply
  29. Jean

    It all seems to be great at first, but after refreshing the page 2 times, it the space returns

    Reply
    • Hemant Gaba

      Hey Jean,

      Could you please share the URL of the page for me to investigate it further?

      Reply
      • Hemant Gaba

        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?

      • impulse

        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

      • Mario

        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/

  30. Jean

    I’ve found the extra white space problem too, is there any way to solve it?

    Reply
  31. Steve Leon

    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://www.peeayecreative.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 …

    Reply
    • Hemant Gaba

      Hey Steve,

      The URLs have shared are not on Divi and this guide is for Divi users only.

      Reply
  32. Rafael

    In Version: 4.17.6 it stopped working

    Reply
  33. Damon

    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

    Reply
  34. Daniel Larsen

    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.

    Reply
  35. Mario

    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?

    Reply
  36. Mustafa

    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

    Reply
  37. Elcy

    Hello – does this solution only work if you are using the grid layout for the blog module? Thank you.

    Reply
  38. Josh

    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

    Reply
    • impulse

      Hi Josh, I have a similar problem. Was it solved somehow?

      Reply
    • Brent

      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?

      Reply
  39. Abu Saleh Ridoy

    Hi!

    Your code is not working for me, can you help?

    Thanks.

    Reply
    • Hemant Gaba

      Hey Abu,

      Could you please elaborate the issue that you facing and provide the URL of the website as well?

      Reply
  40. Tara

    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 🙂

    Reply
    • Hemant Gaba

      Hey Tara,

      Will try this 2 column layout implementation on our end and after finalizing it, will get back to you.

      Reply
  41. Ian

    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/

    Reply
    • Hemant Gaba

      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.

      Reply
  42. Kerstin

    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/

    Reply
  43. Peter P.

    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

    Reply
  44. RIO

    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.

    Reply
  45. Bridget Gaddis

    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.

    Reply
    • Hemant Gaba

      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?

      Reply
      • Agathonikos

        Hi Hemant,
        I re-apply the method and I had the same problem 🙁

  46. Jim

    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?

    Reply
  47. Michelle Petzke

    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!

    Reply
  48. Dimitar

    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)

    Reply
    • Hemant Gaba

      Hey Dimitar,

      Could you please provide the URL of the page for me to investigate further?

      Reply
      • Dimitar

        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

  49. Zoltan

    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! 🙂

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
  50. Zoltan Regoczy

    Probably that is the case. But what can I do about it?

    Reply
  51. Zoltan

    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

    Reply
  52. Dawn

    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.

    Reply
    • lisa

      Yip me too…

      Reply
  53. Andy Flint

    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

    Reply
  54. Boudewijn

    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?

    Reply
  55. Adam

    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?

    Reply
    • Adam

      @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.

      Reply
      • Rob

        Thanks Adam solved my issue – yes, you’re right it only works with meta data enabled.

  56. Dieter Reichelt

    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.

    Reply
    • Hemant Gaba

      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.

      Reply
      • Jake

        Hello,
        A year has passed but the issue is still actual – could you please rewrite the code for the divi shop module, please?

  57. Jay

    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.

    Reply
  58. Jeremy

    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 !

    Reply
    • Jeremy

      I found the problem. I had activated the option “Show an extract”. By disabling this option, your trick worked. Thank you !

      Reply
      • Hemant Gaba

        Hey Jeremy,

        Glad to hear that the problem is solved now.

        Let us know if you have any other query. 🙂

  59. Jen

    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?

    Reply
    • Hemant Gaba

      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?

      Reply
  60. Kirsten

    When I add the code it says “Special characters must be escaped”.
    How can this be adjusted?
    Thanks a lot!

    Reply
    • Hemant Gaba

      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?

      Reply
  61. Mike

    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?

    Reply
    • Hemant Gaba

      Could you please share the URL of the page where you are facing this conflict?

      Reply
    • Mike

      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.

      Reply
      • Szabolcs

        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!

  62. Mirko

    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

    Reply
      • Richard

        Hey Nelson,

        This worked perfectly. Thank you for your tutorials. I’m a product user and so happy you and your family are here in the US.

      • Joanna

        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 🙁

      • Hemant Gaba

        Could you please share the URL of the page where the blog module is present so that I can investigate further?

      • Hemant Gaba

        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?

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart