Classic Promo Same Height When Collapsed

[alorraine]

Hi,

I’ve searched the forums and not managed to get any of the solutions to work.

Testimonials

I’d like the three Classic Promo boxes to be the same height in a row, when collapsed. I currently have that achieved by editing the text (on a 1440x900 screen), but as screen size changes I lose the effect.

I’ve tried to follow https://michaelbourne.ca/create-columns-equal-heights/286/ flexmethod, but it doesn’t seem to work.

Could you suggest what is going wrong, please?

Thanks

al

[jade]

Hi Al,

Please try the suggestions from these related threads:

https://tinyurl.com/ug2z3mj

Hope this helps.

[alorraine]

Thank you for your reply.

I had searched and tested before getting in contact. I can’t get any pure CSS solutions to work, and with the JS solution at https://theme.co/apex/forum/t/setting-classic-promo-boxes-to-same-height/67017/2?u=alorraine works when the promos are collapsed, but they can’t be expanded to show content, as seen live on the site just now.

Any ideas?

[ruenel]

Hello @alorraine,

Please remove the JS code first. And then, you also need to disable the Twitter Feed plugin because it is causing a JS error on the page. Once you have done that, please let us know so that we can check your page again. By the way, we highly recommend the CSS method and not the JS method.

Kindly let us know how it goes.

[alorraine]

Thanks for your help,

That’s the Twitter feed disabled and JS code gone.

[lely]

Hi @alorraine,

Look at this: https://screencast-o-matic.com/watch/cYVvIcw1Zf

Since you have added the class already, try adding this back:

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

Then add this CSS too so you can see the effect of equal height:

.equal-height .x-promo {
    background-color: #fff;
    border: none;
    border-radius: 4px;
}

Hope this helps.

[alorraine]

Hi Lely,

Thanks for the lengths you are going to to help me. I appreciate it.

This code puts all unexpanded Classic Promo at the same height, but doesn’t allow for them to be expanded (Chrome and Firefox).

and in Safari it’s not having it at all…

I realise that it’s not your job to write my site for me, and I may have to go back to the boss to try and sell them a “masonry” layout instead, but if there’s a fix it would be satisfying to find it.

Thanks

al

[lely]

Hi Al,

Yes, I can confirm a masonry layout is best for your design. You may want to check essential grid for more design options.