Headings text wrap doesn't work on mobile

[Jaworskyj]

Hello,
I noticed that the responsive text wrapper doesn’t work properly for headlines, especially on mobile. Longer words don’t flow into the next line but run out of the content area. I included a picture so you can see what I mean.

How can I fix this issue?

Thanks!

[ruenel]

Hello @Jaworskyj,

Thanks for writing in!

The text overlaps outside of bounds because you did not apply the Responsive Typography in your site. Kindly check out this documentation for more information:

• https://theme.co/docs/typography#how-to-set-root-font-characteristics

If you wish to apply responsive text to individual elements, you need to use the element’s Font Size field like shown in the tutorial below. In summary, you need to type calc(1vw + 14px) in the Font Size field. 14px in that sample is like your minimum value.

https://www.youtube.com/watch?v=SdQHpAgFumw

The technique used is actually called Fluid Typography. It can be combined with our theme’s Responsive (Stepped) and Fluid (Scaling) Typography. You can read more about that subject in the link below.

https://www.smashingmagazine.com/2016/05/fluid-typography/

Hope that helps.

[Jaworskyj]

Hi!

Thanks, that helped. I used calc(1vw + …px) on normal text blocks and included responsive text and h-responsive on pages where I used the good old classic custom headlines.

Thank you!

[christian]

You’re welcome. Glad we’re able to help.