Equal block grids (small problem with JS)

[dok1810]

Hi,
I am trying to create equal height block grids, I found several posts on the same toppic and found some great JS. However, it not workingas it should just jet.

See site test.dok1810.nl

Printscreen off problem: https://prnt.sc/fq0t00

The javascript does create equal block grids, but the text is subseeding the block when you scale down to small screens. This is the JS i used:

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

I also found a post in which someone sudjected this JS, but that doesnt fix the problem:

(function($){
$(window).on(‘load resize’, function(){
var max = 0;
$(".x-block-grid-item").each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(".x-block-grid-item").css(‘height’, max);
});
})(jQuery);

Please help :).

[ruenel]

Hello There,

Thanks for writing in! To resolve your issue, please make use of this custom JS code instead:

(function($){
  $(window).on('load resize', function() {

    $(".x-section").each(function(index, el) {
      var max = 0;
      $(this).find(".x-block-grid-item").css('min-height', 0);
      $(this).find(".x-block-grid-item").css('height', 'auto');

      $(this).find(".x-block-grid").each(function(index, el) {
        if( $(this).height() > max ){
            max = $(this).height();
        }
      });
      $(this).find(".x-block-grid-item").css('min-height', max);
    });

  });
})(jQuery);

Please let us know if this works out for you.