Reversed Creative CTA - Text Width

[dsmillie]

Hi,

I’ve managed to reverse the Creative CTA so it shows icon first and text on the reverse using code I’ve found elsewhere on the forum:

jQuery ( function($){

$('a.x-creative-cta').each( function(){

$(this).find('span:first-child').removeClass('text').addClass('graphic');
$(this).find('span:last-child').removeClass('graphic').addClass('text');
$(this).find('.text').attr('style','');

} );

} );

However, the text element then gets compressed into a very short width. This doesn’t look good on a laptop and actually overflows the Creative CTA box on a mobile. Is it possible to have the text element retain the same properties it had as before the transition was reversed? (I.e. so it fills the box and the box resizes to accommodate the text on a mobile?)

I hope that makes sense.

[nico]

Hi @dsmillie,

Thanks for writing in.

Add this in your X > Theme Options > CSS:

@media (max-width:979px){
.x-creative-cta>span.graphic{
    font-size:77%;
}
}

Let us know how it goes.

Thanks.

[dsmillie]

Hi Nico,

Thanks for your reply. I tried this CSS but it still doesn’t fill the CTA box - you have to take the font size down significantly in order to achieve this and then the text is far too small.

I want the text to simply retain the properties it originally had before the CTA transition was reversed, so that the text stays the same size and fills the box which resizes to accommodate it as it wraps on a smaller screen.

I can see the left: 50% property of the graphic (which is now the text of course) is partially causing the issue - when I reduce this to 0% for example, the text goes to the full width I’d expect but is shifted to the left. How do I recenter it?

I’ve attached before and after reversing the transition pics - I’m trying to get the text to look the same as in the original pic without the reverse.

Original:

When transition reversed:

Thanks,
Darren

[dsmillie]

OK, I’ve tried a different solution from the forum here: https://theme.co/apex/forums/topic/cornerstone-creative-cta/#post-851807 which is purely a CSS one instead of the JQuery one above. That has worked much better for me although to get the text to appear I had to change:

.x-creative-cta.slide-bottom:hover>span.text {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
}

to

.x-creative-cta:hover>span.text {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0) scale(1) !important;
    opacity: 1 !important;
}

That worked for me anyway. Thanks for your help and feel free to close this one.

[jumar]

Glad to hear you’ve resolved it!