Cards v2 - How to Center Button

I’m using the Cards v2 element but the button isn’t start aligned even though I’ve changed the flex box setting to be horizontal start and vertical start.

I also checked text alignments and those are all not set.

I’ve attached the URL in the secure note.

I’ve also noted a delay for the content to show up on the back of the card, is there a way to prevent this delay?

Thanks

Hey @wbgTHEMECO,

Regretfully, there is no option to center the button. By design, the content of the V2 Card is centered. The Content Flexbox options you see under the Back Button are for the alignment of the button’s content.

With that said, you’ll need to override the V2 Card’s defined card alignment. Please add this code in the Card’s Element CSS. If you take a look at the selector, it targets the back face only.

$el .is-back {
  align-items:flex-start;
}

This would be the result:

Applied to your card, it should look like this.

Regarding the delay of the content in the back face, that is not our theme’s doing. It could be related to your font optimization (see screenshot below) or something else.

Please copy your test site to a staging server and in the staging site, remove all plugins, custom codes and optimizations then test the cards.

Hope that helps.

On a staging server, I turned off all plugins and there wasn’t anything in the functions file for fonts and the delay is still present.

It seems that the function you’ve referenced shows up on any pages that have the new Card v2 element on it.
If you go to resources page, that function is not in the page source.

Anything else I should look at?

Hi @wbgTHEMECO,

But we can’t replicate that delay issue on our Dev Site, this is likely has something to do with your site optimization as the delay only happens the first time the card is flip. This means your site is not loading the back content of the card until you flip it, it’s like a lazy loading but I’m not sure what is doing it. Please try deactivating any optimizer feature the site might have and see if that resolves the issue.

Thanks,

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