Marginless Columns Same Height

Support
#1

Hi, I’m trying to make the marginless columns on the homepage of my site

the same height. It looks fine on a desktop with a large window open (I have them completely disappearing on mobile) but when the window is reduced in width the column’s heights change.

This makes it look less good so I was wondering if there’s a simple way to make them all keep the same height?

Many thanks

#2

I have achieved this to an extent by following this thread https://theme.co/apex/forum/t/adding-image-to-a-column-as-a-background/1381/3

Now just trying to make columns a specific height if possible, thanks

#3

Hi,

You can try adding this in Edit Page > Cornerstone > JS

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

Hope that helps.

#4

That’s great. Thanks, I got it to work.

I’m still trying how to do the same thing on this page

Basically it is the same exact issue I’m trying to overcome. The boxes are almost balancing height-wise because I made the text about the same character count in each. But it would be best if I could keep the same height on each row for both boxes in that row.

Hope that makes sense.

Thanks for help!

#5

Hi there,

Making the columns of sections to have equal height is a feature not available out of the box for the theme and this request falls out of our support as this is a customization request.

However, you can refer to the code here:

It is the same as the code @paul.r provided previously, as you will need it for the other page, you will just have to add the CSS selector that would target the columns for the Our People page which is .page-id-64424 .x-column .x-promo

Hope this helps.

1 Like
#6

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