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.