Setting all Cards to the same height

Support
#1

Hi,

I have been trying to set my card height to all the same height. I have looked on the forum and seen it suggests adding the following code to correct this:

(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);

I have entered the code but the cards are still all different sizes. Can you advise if I’ve missed anything obvious?

Unable to style card element in xtheme
#2

Sorry I should say my website I’m trying to do this on is:

#3

Hi David,

Please kindly go to the wrapping column settings of each card that you added. So you will see the options for the 3 columns each and there you need to enable the Flex Layout option for each column:

Screen Shot 2020-06-17 at 13.49.04
Screen Shot 2020-06-17 at 13.49.04448×744 14.5 KB

Flex layout forces the content inside the column to take up the whole height and will force the same height feature without the need of adding any kind of Javascript code.

Thank you.

#4

Hi,

I dont have this as an option in the cards. This is how the settings look:
Screenshot 2020-06-17 at 13.54.54

Thanks,

David

#5

Hi David,

The screenshot provided above is the configuration of Column (not card element).

On the column, please turn On the Flexbox layout, Child placement to Row and Vertical Align to Stretch.

Do these to each columns containing the Card element.

Cheers!

#6

Thanks - this helped a lot, I knew there must be a way!!

#7

We are delighted to assist you with this.

Cheers!

#8

Hi,

So the cards are working great now on a computer. But I was wondering on a mobile, as there isnt the hover function, is there a was to possibly have the cards flip when the whole card is in the screen view? Just so the cards automatically flip over without them needing to click on them?

Thanks again for your support!

#9

Hi David,

Unfortunately, that’s not currently possible. What I can recommend is display the flipcard on desktop, and then content on mobile that looking similar to the card when flipped. Like a simple columns with background, button, and texts. Please check this about the visibility features https://theme.co/docs/hide-or-show-content-by-device-size

Thanks!

#10

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