Help with Creative CTA element please! I'd like it to show all of the text on hover

Hi, I’m using the Creative CTA element and when you hover over it, the text I’ve added in doesn’t all show, its cut off at the top and bottom! I’ve tried to override this myself with CSS using the following, but nothing happens!

.x-anchor-text {
overflow: visible !important; 
}

I’d appreciate it if you could give me any help with it!

I’ll put the URL in a secure note as I’ve got a construction page up at the minute and I’ll let you know the By Pass Password.

Thanks!

Hi @core365,

By withdrawing the post, I believe you already have resolved the issue. If the issue still existed, you can let us know.

Thanks.

Hi @tristup,

No, the issue hasn’t been resolved, I just deleted the post I added by mistake as I did a post instead of a secure note! So I’d still like help with the Creative CTA issue please.

Thanks!

Howdy, @core365! Thanks for writing in…for this particular situation, you might need to find another pattern to introduce your content as the Creative CTA is not intended to be used in the way that it is setup here. Essentially, the Creative CTA can be thought of as two Button Elements, with the second one being revealed on hover and “replacing” the content from the first one.

The way this works is that the second Button is placed using absolute positioning over the main primary Button, which means that it does not actually take up any physical space in the document and its sizing is determined by the primary Button. This is why your text is being cut off, because the size of your first Button is being determined by your image, which is smaller than the text content on your second Button. The only way to somewhat get around this would be to apply a hard height value using the Button’s settings that is large enough for your text to be seen, but this will also add more spacing above and below your primary image in the main Button.

Another possibility you could explore is the Card Element, which you could use the front face’s headline graphic to output your image, and then place all your text on the back face. This Element will grow according to the content placed on each side, so it would be a better fit for this particular situation.

Hopefully this helps to point you in the right direction. Cheers!

Hi @kory,

Thanks for the info! I’ve just tried the Card element, but it’s not growing according to the content. The front is matching the same height the back needs to be for the content to fit on there. I’ve tried both the current Card element and also the Classic Card element and both don’t resize. Am I doing something wrong? I’ve left both examples on the page and I’ve labelled them so you know which is the Creative CTA and the 2 Cards.

Thanks!

Hello @core365,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Thank you in advance.

Hi @ruenel,

That would be great if you could take a look for me!

I’ll put all the admin info in a secure note and yes, I confirm you can make changes to the site.

Thanks!

Hello @core365,

Set a minimum height for your CTA so that the creative contents will fit into the whole section. The image in front may be a bit smaller though.

Please do check the page as I have made some changes to it.

Hi @ruenel,

Thanks for that! When I view it on my phone or ipad, I tap on the image to see the flip side/content of the CTA, but after tapping on it, it jumps to the top of the page and then when you scroll back down the page you can see the text that’s on the flip side of the CTA. I know it’s something to do with the link that can be assigned to it, which I haven’t set as it’s not needed. How can you tap on the image to reveal the text without it jumping to the top of the page?

I don’t understand how the link would work anyway on a mobile device, as if you need to tap the image to reveal the flip side/content, you’d be redirected to the link URL and you won’t see the text!

Thanks!

Hi @core365,

Can you please check if the # link has been added to the URL? If that is the case, please remove the # link and disable the Link option, and check once by clearing your phone browser cache.

Hope it works.
Thanks

Hi @tristup,

The interface that you have is different to mine, I haven’t got the option of disabling the Link option. I don’t know if it’s the CTA element settings you were looking at, as it says ‘Card’ and ‘Front Content’. Here’s a screen grab of the settings I have available:

I’ve tried removing the # from the Link URL and it seems to throw something out, as when I view it on my mobile it’s not looking as it should:

Do you know of any other plugin that may achieve what I’m after, as it’s looking like the CTA isn’t a viable option.

Thanks!

Hello @core365,

Your minimum height of 350 pixels is not enough on smaller screens. You must update it to 420 pixels. Regretfully we do not have any other feature or functions that works the same or similar to the CTA element.

Best Regards.

Hi @ruenel,

I’ve increased the minimum height, but all it seems to do is increase the gap between the text and the image - please see screen grab below. The orange text shouldn’t be showing as that’s what’s on the reverse side. You should only see it when you tap the image ‘Mann Brothers’. It’s not working or displaying correctly on the mobile.

Thanks

Hi @core365,

Really sorry for the confusion on the Creative CTA and the Card element. I have checked the section mentioned in your screenshot on my Android mobile phone and found it is working fine. Can you please check once by clearing your mobile browser cache? If it does not resolve this issue, please mention the device, browser name and version, and also the operating system you are using, which helps us to replicate the issue at our end.

Thanks

Hi @tristup,

It is likely to be my phone then! It’s an iPhone 5s and v 12.5.2. It’s probably considered to be a relic now, but it’s still got some use left in it!

Thanks!

You’re welcome.