Classic Card Height

[RobertRees]

I have 4 Classic Cards all contained vertically across one section. I would LOVE to be able to set their height with a numerical value vs allowing the text contained within them to determine the vertical size.

I have seen a post that mentions JS code to accomplish this, but I have absolutely ZERO clue what that means. It would be nice for y’all to add that in as an option if that is in fact what I have to do to make this happen. Is there anything that is easy for the designer who just purchased a cool them in hopes of making a cool website?

Thx

[friech]

Hi Robert,

Thank you for writing in, try adding this to your Page > JS area.

(function($){
	function make_same_height(){
		var max = 0;

		$(".x-card-inner").each(function(index, el) {
			console.log( $(el).height() );
			if( $(el).height() > max ){
				max = $(el).height();
			}
		});

		$(".x-card-inner").css('height', max);
	}
	$(window).on('load', function(){
		setTimeout(make_same_height, 500);
	});
})(jQuery);

Please keep in mind, that further customization from here falls outside the scope of our support that we can offer.

Hope it helps,
Cheers!

[RobertRees]

I have copied and pasted that and ended up with the following error:

The preview could not load due to the iframe response being incomplete. This is most often related to a plugin conflict or customizations introducing a PHP error.

[nabeel]

Hey Robert,

Thanks for the update. I tested the code in my local setup and it’s working as expected (see screenshot)

You can try this code instead in the Theme Options > JS::

(function($){
	function make_same_height(){
		var max = 0;

		$(".x-card-inner").each(function(index, el) {
			console.log( $(el).height() );
			if( $(el).height() > max ){
				max = $(el).height();
			}
		});

		$(".x-card-inner").css('height', max);
	}
	$(window).on('load resize', function(){
		setTimeout(make_same_height, 200);
	});
})(jQuery);

There could be something else which is causing the issue because the code doesn’t trigger any error. I tried to find your site but you seem to have quite a few licenses registered on your account so I am not sure which website is in question. If the above code doesn’t work then please share the exact page URL in question so we can take a look.

Thanks!

[RobertRees]

the site that I am working on is FAQ’s Page

[friech]

Hi Robert,

I don’t see the given JS code added on that page, please copy and paste the given code on the Page > JS area:

Thanks,

[RobertRees]

I had not tried the latest suggestion, but I have now… and it appears that it is working fine!! WOOHOO!!! Thank you.

[friech]

We are delighted to assist you with this.

Cheers!