Reusable Tricks and Tips

Make all columns equal heights

// Makes all columns equal height
function fixColumns(wrapperClass, innerClass) {
  $(wrapperClass).each(function () {
    var maxHeight = 0;

    $(this).find(innerClass).each(function () {
      $(this).css('min-height', 0);
      maxHeight = Math.max($(this).outerHeight(), maxHeight);
    })

    $(this).find(innerClass).css('min-height', maxHeight+'px');
  });
}

$(window).load(function() {
  fixColumns('.field--home-featured-content','.main');
});


$(window).resize(function(){
  fixColumns('.field--home-featured-content','.main');
});

wrapperClass is the parent row class
innerClass is the element you want to make equal height.