Block grid equal heights

[LixarCommunity]

Hi,

I need some help in making block grid items to be equal hight and aligning the last item in the grid to the bottom.

I sew some options on the forum, but it didn’t work for me: https://theme.co/apex/forums/topic/block-grid-equal-heights/

please, can you have a look?

https://lwayve.com/

Thanks

[nabeel]

Hi there,

Thanks for writing around! As you see this requires custom development which falls outside the scope of our support. With that being said I can point you in the right direction. First add the following CSS code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-block-grid-item .x-audio.player {
    height: 30px;
    position: absolute;
    bottom: 0;
    width: 100%;
}
li.x-block-grid-item {
    position: relative;
}

Then you can add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

function sameHeightSection(section) {
	var max = 0;
	var sections = jQuery("." + section);
	sections.each(function(index, el) {
		if( jQuery(this).height() > max ){
			max = jQuery(this).height();
		}
	});
	jQuery("." + section).css({
		'height': max, 
		'min-height': max, 
		'max-height': max
	});
}

jQuery(document).ready(function($) {
	sameHeightSection('x-block-grid-item');
});

jQuery(window).resize(function(){
	sameHeightSection('x-block-grid-item');
});

This should make the columns of same height, but please note that the code I’ve provided is just a guide and not a permanent solution. We won’t be able to provide any support to any issues if caused by the above script or it’s conflicts.

Thanks!

[LixarCommunity]

Thanks!!! it did work.

[jade]

It seems that you have deleted your last post.

In case you are still having an issue, kindly give us some information so that we can check it.

Thank you.