Height of cards in columns not the same in row

[Teeebest]

Hi,
I have 4 columns in a row and a card in each column. unfortunately, despite using the same size of images, the height of the columns are not the same. how can I fix this, please?

[ruenel]

Hello @Teeebest,

Thanks for writing in!

Please make sure that you image dimensions are the same. Also, be sure that the title header for each card is almost of the same height. Please do do that any custom html tag in the titles. If nothing is helping, provide us access to your site so that we can check your settings and investigate your card elements. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Best Regards.

[friech]

Hi @Teeebest,

It seems you did not take into account the content on the back of card, because that is the height difference is coming from. Please follow the steps below thoroughly, because this will require customization, we can not provide any enhancements or troubleshooting on this custom code, it would be your responsibility to take it from here.

• First, add a class card-section to your section where the cards are.
  
  

• 
  
  
  

• Then add this to the Page > JS area

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

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

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

• Then clear your caching plugins and browser’s cache after.

Again, it would be your responsibility to take it from here.

Hope it helps,
Cheers!

[Teeebest]

@friech

(function($){ function make_same_height(){ var max = 0; $(".card-section .x-card-faces").each(function(index, el) { console.log( $(el).height() ); if( $(el).height() > max ){ max = $(el).height(); } }); $(".card-section .x-card-faces").css(‘height’, max); } $(window).on(‘load resize’, function(){ setTimeout(make_same_height, 200); }); })(jQuery);

Thanks.It worked.

[christian]

You’re welcome.