Responsiveness of Column Height

Support
#1

I’m trying to keep the height of each column the same as each other as they respond to various screen sizes.
http://staging.primalcreate.com

#2

Hi There @itsthehype

Thanks for writing in! Could you please follow our knowledge base guide on equal height column here (https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272).

Hope that helps.

#3

Hello, thanks for the reply, I added the code and the columns are equal, but the contents are not effecting the size

#4

And here is the CSS version

#5

Hey There,

Thanks for sharing the screenshots. I have looked at your site and I could not find the section where the columns needs to be in equal heights. Meanwhile, please make use of the jQuery and you can use this updated version instead:

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

jQuery(window).on('load resize', function($) {
	var max = 0;
	$(".equal-height .x-column").css('height', 'auto');
	$(".equal-height .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).outerHeight();
		}
	});
	$(".equal-height .x-column").css('height', max);
});

We would like to know if this works out for you.

#6

Ok thanks, I’ll try that tomorrow morning

#7

Sure, do let us know how this goes!

#8

#9

This solution works for the most part, but at certain sizes the bottom button gets pushed outside fo the column

#10

#11

The previous screenshots were within the Pro preview window, or the edit window. This next one is the live site

#12

Hi @itsthehype,

May I know which page has this issue? For the meantime, please change that code to this.

jQuery ( function($) {

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

$(document).ready( set_equal_height );
$(window).on('load resize', set_equal_height );

} );

Thanks!

#13

Its the Home Page

#14

Here it is with the new code

#15

This is similar to the css only solution

#16

Hi again,

Please add the following code as well in the Theme Options > CSS:

.featured-gradient {
    position: relative;
}

.x-anchor-button {
    position: absolute;
    bottom: 0;
    left: 0;
}

Hope this helps!

#17

Before I saw your reply I did something similar with the Element Css and its worked, Thanks for your help!

#18

Glad we could help.

Cheers!

#19

I removed all the code that wasn’t being use to create the effect, but for some reason, its no longer switching to mobile view at smaller sizes

#20