Responsive same height boxes jQuery function

Are your featured posts not aligning due to different length excerpts and titles?

Unfortunately CSS can’t really help here unless we set lots of different heights at different breakpoints to accommodate for the text. This is what I call a “hacky” approach.

If you are looking for a smooth responsive solution the code below will be your new best friend. I use this code in all of my web builds and it’s just awesome! Take a couple of minutes to quickly scan over the code, it’s pretty simple, but effective.

jQuery(document).ready(function() { 


$.fn.sameheight = function() {
	
	var maxHeight = 0,
	$this = jQuery(this);

	$this.each( function() {
		// reset the height
		jQuery(this).css({'height':'auto'});
		var thisHeight = jQuery(this).height();
		if ( thisHeight > maxHeight ) {
			maxHeight = thisHeight;
		}
	});
	
	$this.height(maxHeight)
}


var width = jQuery(window).width();


// All Devices
jQuery('.same-height-all').sameheight();
jQuery('.same-height-all2').sameheight();
jQuery('.same-height-all3').sameheight();
jQuery('.same-height-all4').sameheight();

jQuery( window ).resize(function() {
	jQuery('.same-height-all').sameheight();
	jQuery('.same-height-all2').sameheight();
	jQuery('.same-height-all3').sameheight();
	jQuery('.same-height-all4').sameheight();
});

// Tablet and Desktop	
if ( width > 700 ) {
	
	jQuery('.same-height').sameheight();
	jQuery('.same-height2').sameheight();
	jQuery('.same-height3').sameheight();
	jQuery('.same-height4').sameheight();

	jQuery( window ).resize(function() {
		jQuery('.same-height').sameheight();
		jQuery('.same-height2').sameheight();
		jQuery('.same-height3').sameheight();
		jQuery('.same-height4').sameheight();
	});
	
}


});

How to implement it in your HTML

Simply add one of the classes listed in the code above to all elements that you want to be the same height.

For example:

<div class="same-height"></div>
<div class="same-height"></div>
<div class="same-height"></div>

or

<ul>
    <li class="same-height2"></li>
    <li class="same-height2"></li>
    <li class="same-height2"></li>
</ul>

Note that if you use the same class on two different groups of elements on the same page they will all end up the same height. If you are running out of classes from the ones I have provided just add more.

“same-height-all” or just “same-height”…

Ok so you spotted that in the jQuery there are two similar bits of code…

// All Devices
jQuery('.same-height-all').sameheight();

jQuery( window ).resize(function() {
	jQuery('.same-height-all').sameheight();
});

// Tablet and Desktop	
if ( width > 700 ) {
	
	jQuery('.same-height').sameheight();

	jQuery( window ).resize(function() {
		jQuery('.same-height').sameheight();
	});
	
}

Use the .same-height-all classes if your boxes are going to constantly be side by side and never stack to a single column.

However in most cases a responsive multi-column layout will break to a single column on a mobile device, at which point the same-height functionality is no longer required. Therefore you would use the .same-height classes as they only come into effect at a specified window width, in this case 700px. You would obviously change this value in the jQuery to match your single column breakpoint.