Equal height entries in masonry blog

[Alex_H1]

Hi there - on my site https://humphreys.law/library/, I am hoping to make the entries equal height. Please can you point me in the right direction?

Thanks!

Alex

[nabeel]

Hey Alex,

Thanks for writing around! Try adding the following CSS code in the Theme Options > JS:

function sameHeightSection(section) {
	var max = 0;
	var sections = jQuery(section);
	sections.each(function(index, el) {
		if( jQuery(this).height() > max ){
			max = jQuery(this).height();
		}
	});
	jQuery(section).css({
		'height': max, 
		'min-height': max, 
		'max-height': max
	});
}

jQuery(document).ready(function($) {
	sameHeightSection('article.hentry');
	setTimeout(function(){ jQuery(window).resize() }, 300);
});

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Alex_H1]

@Nabeel

function sameHeightSection(section) {
var max = 0;
var sections = jQuery(section);
sections.each(function(index, el) {
if( jQuery(this).height() > max ){
max = jQuery(this).height();
}
});
jQuery(section).css({
‘height’: max,
‘min-height’: max,
‘max-height’: max
});
}

jQuery(document).ready(function($) {
sameHeightSection(‘article.hentry’);
setTimeout(function(){ jQuery(window).resize() }, 300);
});

Superb - thank you!!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!