Level Cards to Same Height

Support
#1

Hi there,

I’m trying to do two 2 things with the cards feature I’m using here: https://trevorbedfordhypnotherapy.com/

1) Make all the cards the same height as the largest one (tried the code in other posts here but it didn’t work).

2) Change the flip to a fade ( I found some code below but it doesn’t seem to work).

.x-card-outer.flip-3d .x-face-outer.front {
    z-index: 6 !important;
}
.x-card-outer.flip-3d .x-face-outer.back {
    z-index: 2 !important;
}
.x-card-outer.flip-3d.flipped .x-face-outer.front {
    z-index: 0 !important;
}
.x-card-outer.flip-3d.flip-from-top.flipped .x-card-inner {
    -webkit-transform: initial; 
    -ms-transform: initial;
    transform: initial;
}
.x-card-outer.flip-3d.flip-from-top .back, .x-card-outer.flip-3d.flip-from-bottom .back {
    -webkit-transform: initial;
    -ms-transform: initial;
    transform: initial;
}

Your help is greatly appreciated. (Login details in the secure note).
Cheers!
Matt

How to fix card height issue
#2

Hi There,

To make the cards same height, please add this custom JS under Theme Options > JS:

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

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

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

To change the flip to fade, please update your custom CSS to this:

.x-card-outer.flip-3d .x-face-outer.front {
    z-index: 6 !important;
}
.x-card-outer.flip-3d .x-face-outer.back {
    z-index: 2 !important;
}
.x-card-outer.flipped .x-face-outer.front {
    z-index: 0 !important;
}
.x-card-outer.flipped .x-card-inner {
    -webkit-transform: initial !important;
    -ms-transform: initial !important;
    transform: initial !important;
}
.x-card-outer.flip-3d .back {
    -webkit-transform: initial !important
    -ms-transform: initial !important;
    transform: initial !important;
}

Hope that helps and thank you for understanding.

#3

Hi thai,

That’s amazing, thanks so much.

So now the cards switch between the front and back immediately which is preferable to the flip, but is it possible to make them fade too?

Cheers!
Matt

#4

Hi Matt,

Regretfully, further customization from here falls outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. You can seek help from a developer to help you on this.

Thank you for understanding,

#5

Hi friech,

Yes it was just that above, thai said the code he kindly gave me would make the cards fade, and I wondered why it didn’t? Can’t be a huge change can it?

Thanks,
Matt

#6

Hey Matt,

The code Thai suggested is the same as the code you posted only that !important rule was added to each declaration. Regretfully, it’s not that simple to fade the cards. It uses the transform property which has no fade feature. This would also require additional custom Javascript.

Thank you for understanding.

#7

No worries, thanks Christian.
Cheers!
Matt

#8

Hi,

There’s a fade/slide effect like the one you can set in the columns in Cornerstone, where some of the cards wait until they’ve been scrolled far enough before sliding in. I don’t have the slide effect enabled — is there a way to stop them from doing this?

Thanks,
Matt

#9

Hello Matt,

You can enable or disable the fade/slide effect in the column settings.

Hope this helps. Please let us know how it goes.

#10

Hi RueNel,

Yes, thanks for that, but they are switched off there — I’ve tried switching them on and off again but it didn’t work.

I’ll put the login details in a secure note, would you mind having a look in case I’ve missed something?
Thanks as ever,
Matt

#11

Hi Matt,

You missed to turn it off in some columns.

I went ahead and and turn t off for you.

Please check in your end.

Thanks

#12

Ah, thank you so much Paul — I thought the first column set it for all of the columns in a row, didn’t think to check the others.

Thanks again.
Matt

#13

You’re most welcome Matt!

#14

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