Streaming live at 10am (PST)

Responsive resize of heading text on mobile


#1

Hi fellows,
I can't seem to find any setting that allows big long words to scale down or at least break down to another row.
To be specific, a word like "Workshops" set in 72px will stretch outside of the smaller screens

How do I go about setting text to scale down automagically as it hits the screen edge?

Sceenshot:

Link:
http://lin-education.webflow.io/


#2

Is your text set to a fixed width?


#3

Not a minimum width, but the div block has a maximum width (to not stretch all over the bigger screens)


#4

Try to use vw (or play around with vh) for your font size, but you still have to adapt it for every breakpoint. You can also make use of soft hyphens ( &shy - paste it between the letters where you want it and then esc that text block or select some other item to see the result) which make words break if that's what you want. in two lines if that's what you want.

Tom


#5

Yes, soft hyphens will work here, thanks Tom!
Wishing for a built-in solution that will scale the font size to fit. Pasting soft hyphens is a bit steep for my future CMS contributors.


#6

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