Column height

[goalsarecool]

I’m trying to make the columns on the following page the same height and having some trouble. The column height is correct on windows, but not MAC.

https://goalsarecool.com/training-library/

Here is the Javascript I’m using.

/Make columns equal height/
(function($){
$(window).bind(‘ready load resize’, function(){
var max = 0,
mobile = $(window).width();

if ( mobile > 767 ){
$(“.equalize .x-column”).each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(“.equalize .x-column”).css(‘height’, max);
}
});
})(jQuery);

[friech]

Hi There,

Thank you for writing in, do you mean that three 1/3 columns with promo element in it? Even if you successfully have the columns an equal height, it wont look like they have because its content (promo element) won’t be resize together with it.

So you need to target to resize the Promo element instead. Please update your JS code to this:

jQuery(document).ready(function($){
    var highestBox = 0;
    mobile = $(window).width();
    if ( mobile > 767 ){
	        $('#x-section-2 .x-promo').each(function(){  
	                if($(this).height() > highestBox){  
	                highestBox = $(this).height();  
	        }
	    });    
	    $('#x-section-2 .x-promo').height(highestBox);
	    $( '#x-section-2 .x-promo' ).css( "position", "relative" );
	}
});

If you need the buttons to align at the bottom, please add this on your custom CSS.

@media (min-width: 768px) {
	#x-section-2 .x-promo #orange-button {
		position: absolute;
		bottom: 30px;
		width: calc(97% - 3em);
	}
}

Add a unique ID to your Section and replace the generic x-section-2 from the codes. This is to avoid affecting the other Promo elements on your other pages.

Hope it helps,
Cheers!

[goalsarecool]

That did not work. It made the button expand the entire page and the boxes did not line up.

[friech]

Hi There,

Where did you place the codes? I am not seeing it. Are you not getting this result?

Please clarify,
Thanks.

[goalsarecool]

I removed the code because it was causing my site to have issues. No, it didn’t look like the image you provided, but that’s what I’m trying to make it look like.

Thanks!
Blake

[nabeel]

Hi again,

You can add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media (min-width: 768px) {
	.page-id-13892 #x-section-2 .x-promo #orange-button {
		position: absolute;
		bottom: 30px;
		width: calc(100% - 3.5em);
	}
	.page-id-13892 #x-section-2 .x-promo {
	    position: relative;
	    min-height: 520px
	}
}

Let us know how this goes!