Align bottom of Promo Item

[jvalenti]

Can someone tell me how to align the bottom of the promo boxes on this page. I want to bottoms to be inline regardless of how much text is written in the promo.

http://cvcmissions.org/local-initiatives/

[Prasant]

Hello Joe,

Thanks for asking.

You can use the solution mentioned in following article. Although the article explain the concepts using Columns, but the logic and fundamentals remains the same.

Use Flex Layout | Themeco Docs

Thanks.

[jvalenti]

Thank you for the response. Sadly, this did not work as expected. I tried the class on both the section and the columns and it did not change the layout. Is there something that i could be missing?

[friech]

Hi Joe,

There is a semicolon on your equal-height CLASS, please remove it.

And you need to apply that CLASS to all Sections that contains your Promo elements grid.

And since you need to apply the equal height script on Promo elements (not on the columns), please update the provided JS code to this:

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

And please add this to the Page > CSS area to retouch the styling of promo element.

.equal-height .x-column .x-promo {background-color: #0c0c0c;}
.equal-height .x-column .x-promo-content {box-shadow: none;}

Hope it helps,
Cheers!

[jvalenti]

Thanks for the help!

I applied all of the changes that you mentioned, but it still does not seem to be working correctly.

Any other thoughts?

[nabeel]

Hey Joe,

I tested the code locally and it works fine. I checked your page and I see you’ve not assigned the class equal-height to all of your sections that has the promo element on that page. Please assign it to all the sections first.

I also inspected your page source code and I see you’ve not pasted the code entirely, there is a syntax error in the code that’s why it isn’t working (see screenshot).

Please remove the previous code first and then paste the following code:

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

Make sure to copy the entire code. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!