[anwwebParticipant]

Hi,

I am trying to create equal height block grids, they’re fine on full screen but when I down size the resolution some of the boxes become differant sizes.

I searched the forum and found a few posts with code like the following:

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);
});

But it’s not working for me, please help, how can I make the 2 x 2 block rows equal height. TIA

http://anwweb.com/new

[Rue NelModerator]

Hello There,

Thanks for writing in! Please have your code updated and use this instead:

(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);

This code will change the heights of the block grid when the page loads and when you resize the browser.

Hope this helps. Kindly let us know.

[anwwebParticipant]

I kinda have it fixed using the following:

(function($){
  $(window).on('ready load resize', function(){
    var max = 0,
        mobile = $(window).width();
    $(".x-block-grid-item p:nth-of-type(2)").css('min-height', 'inherit');

    if ( mobile > 479 ){
      $(".x-block-grid-item p:nth-of-type(2)").each(function(index, el) {
        if( $(this).outerHeight() > max ){
            max = $(this).outerHeight();
        }
      });
      $(".x-block-grid-item p:nth-of-type(2)").css('min-height', max);
    }
  });
})(jQuery);

But @media 496 to 480px, it is losing the above and inheriting min-height: inherent from somewhere and loosing said changes, where does this inherent come from? I don’t notice anything appearing in @media in inspect element, just the change happening

[anwwebParticipant]

Hi, Sorry I was writing the above, when you posted, either way with your new code or the above I have the same problem, they both work till 496px then the max-height changes to inherent between 496 – 480px.

Thanks

[anwwebParticipant]

Hi, I have this solved with the code I wrote above, with your code the boxes, seems to implode / disappear into themselves when resized as attached. Anyway I have it working for now, but any idea as to why they are acting as below with your suggestion.

TIA

[anwwebParticipant]

attached

[anwwebParticipant]

attached again

[RadModerator]

Hi there,

It seems to be working fine on my end. I’m not getting the on in your screenshot while resizing.

Thanks!

[Author]

Posts