Equal Columns height regardless of content

On my home page I have 3 rows, each row has 4 columns. I want to make all the columns in each row the same height - and the height will be chosen by the column with the most content in it. I have tried adding the following JS

jQuery(document).ready(function($) {
var max = 0;
$(".x-column.same-height").each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(".x-column.same-height").css(‘height’, max);
});

But I cant make it work… Please Help.
the site is http://www.warrackstestdomain1.co.uk

Hello There,

Thanks for writing in! The JS code is not working because there is no columns with same-height class added to it. Please make use of this code instead:

(function($){
 $(window).on("load resize", function(){
  var max = 0;
  $(".flexmethod .x-column").each(function(index, el) {
    if( $(this).height() > max ){
      max = $(this).outerHeight();
    }
  });
  $(".flexmethod .x-column").css('height', max);
 });
})(jQuery);

We would loved to know if this has work for you. Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.