Setting classic promo boxes to same height

Hello,

I was wondering if there was any way to set classic promo boxes to be the same height. As of now, the height of each promo box varies with the amount of text in it. I’ve set all the images to be the same size.

I have a ton of classic promo boxes, so it would be nice if there was a way to do this without having to recreate everything using a different type of widget.

Here was the page in question:

https://www.nelc-law.org/boardofdirectors/

I have several pages like this that use the classic promo boxes, and the height of each box varies in all of them.

Thanks for your help!

Hi Michael,

Please try the suggestion from this KB article:

Hope this helps.

Hello,

Thanks for your help so far. I added the javascript code above and added the equal-height class to the section via Cornerstone. Unfortunately, it didn’t work. I’m sure it’s a user error on my part, but I wasn’t sure how to proceed.

As of now, I just had Section 2 of this page with the equal-height class:

https://www.nelc-law.org/boardofdirectors/

Would you mind looking at what I did to see if there was something that I missed? If you could help me get just one of these sections working with columns, I can get all the rest on my own. Thanks so much for your help!

Hi Michael,

You almost got it right, you just need to do a bit of changes.

Please follow these:

#1 Update this code:

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

to

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

The code you have added will set the same height for the columns. You will have to target the class for each promo element and promo elements have the class x-promo.

The add this code in X > Theme Options > CSS:

.equal-height .x-promo {
    background-color: #000;
}

Lastly, please make sure to add the class equal-height to every section that contains the promo elements that you want to have the same height.

Hope this helps.

Thanks for your help! It’s looking great. I did have one more quick question:

https://www.nelc-law.org/boardofdirectors/

Now that the padding has been added to each box, it appears as a slightly different color. Would there be a way to make it appear as the same color so there isn’t a line showing where the additional padding is?

Thanks again!

Hi Michael.

You’re always welcome! Glad @Jade was able to help you here.

The gray colors around it are the same for me here all through out. Did I missed something here? See this: https://screencast-o-matic.com/watch/cqX3i3UwmG. Please clarify.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.