Animated Heading - Cutoff on Mobile - Wrap Text?

Mehtaz Afsana Borsha Staff

5 years ago

Hi,

Could you please give me a screenshot of your issue?

-Regards

T

Tuan Asked this

5 years ago

Screenshot shared in hidden section.

Mehtaz Afsana Borsha Staff

5 years ago

Did you ise any extra css for that?

T

Tuan Asked this

5 years ago

No I did not. This is default behavior of the Animated Heading Add-on. Please try to view on a mobile device to see the issue

T

Tuan Asked this

5 years ago

Hi Team,

Is there an update on this?

This is a bug that needs to be fixed as the animated text does not wrap and gets cut-off.

Thanks

Mehtaz Afsana Borsha Staff

5 years ago

Hi,

Did you compress the css option?

T

Tuan Asked this

5 years ago

No, I did not touch the CSS. Like I said eariler, this is default behavior of the Animated Heading Add-on.

Your team has admin access, could you and your team please take a look?

Paul Frankowski Senior Staff

5 years ago · edited

Hi,
The only basic way now is to:

1. reduce font size of Animated Heading. You had 30 I set 24 for mobile.
2. And use letter-spacing: -1px;

T

Tuan Asked this

5 years ago

Thanks but is there some CSS/hack to make it text wrap?

Even on a desktop, if the row has 2 columns, the Animated Text will be cut-off once it reaches the edge of the column.

And will there be an update to fix this?

Paul Frankowski Senior Staff

5 years ago

The easiest way is to simply reduce the font-size and letter spacing. Sometimes few pixes (1-2px) less make a big difference.

On bigger screen is OK, but I understand that on small laptop it may needs small correction.