Equal Height Columns Question

[russell3]

Hi

On my page https://www.steedman.co.uk/about-us/our-people/ I am trying hard to make the columns in the Promo boxes (which are used on demo for team member boxes) the same height.

I have tried various methods from this forum but none seem to work. Just to clarify I don’t want to make a fixed height for all of the promo boxes, but instead make each box the same height with the other box in the same row.

I realise this may be beyond the scope of this forum but I managed to make the marginless columns on my home page at https://www.steedman.co.uk/ have the same height using the flexmethod

Any help much appreciated.

Thanks

[jade]

Hi there,

Please try the code on this KB article:

Use Flex Layout | Themeco Docs

Then replace #x-section-4 .x-column with .page-id-64424 .x-promo.

Hope this helps.

[russell3]

Hi Thanks for help.

When I paste in the code to the CONTENT JS area and press RUN (or save and preview in browser) it still looks the same. Basically when the window is resized one of the promo boxes is usually bigger than the other height-wise.

This is the code I’ve used:

jQuery(document).ready(function($) {
	var max = 0;
	$(".page-id-64424 .x-promo.").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".page-id-64424 .x-promo.").css('height', max);
});

[russell3]

Actually this is the code I used (I had put an extra ‘.’ in the bit of code I pasted:

jQuery(document).ready(function($) {
	var max = 0;
	$(".page-id-64424 .x-promo").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".page-id-64424 .x-promo").css('height', max);
});

[jade]

Hi there,

I have checked your site and you haven’t update the class on the code from the article. it’s still showing #x-section-4 .x-column.

Also the code is designed to determine the promo box with most height and sets its height to the rest of the promo boxes that appear on the page. This is also limited to have the boxes to have an equal height on page load and not when the browser is resize. You will have to customize the code further if you wish to set the boxes equally as you resize the browser.

[russell3]

Ok that’s great. Thanks for help. I’ll look into and see what I can do.

[thai]

You’re most welcome.