How to make text / Rich Text responsive?

Design help Layout & Design
1

Hello,

I would like to make a text responsive for mobile devices because it is not suiting in the textfield, maybe somebody can help me here. It looks like this. Im new here and try to learn everything

Thank you very much! Greetings

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Michael,

Welcome to Webflow :slight_smile: I’d suggest making the width 100% as that’s what’s causing the initial overflow. You can then play around with the left + right padding if you want to add a little more breathing room on the sides.

Hope this helps,

J

1 Like
3

Hi, yes I tried this before changing the Rich Text Field and text to 100% width but sadly it didn’t worked, I think about what else could it be

Thanks

Greetings

Michael

4

If you could share your read-only link, I can take a deeper look to see what needs to be changed.

This is how to share the link: Share a read-only link | Webflow University

5

agree with the above that making it 100% width will fix the majority of the overflow issue.
you could also try using the CH property for the width of the text area for readability, for example on the rich text area add 60CH - which is an optimal length for readability and will cause it to break after 60 characters

per the title of your question specifically, if you are looking for true “responsive” text that scales with the width of the viewport, I would look into @Finsweet fluid responsive method, I have used it in the last few projects and love it

6

https://preview.webflow.com/preview/fastviral?utm_medium=preview_link&utm_source=designer&utm_content=fastviral&preview=549f5dbe00c712e346eb34a53ee39bba&pageId=622910210b1c8051cb7faac0&workflow=preview here it is, “impressum” is the text site what makes the most problems, sadly the 100% width didn’t changed the issue. Thank you very much! I keep trying

7

Is the text pasted in from somewhere else? I’ve had issues with formatting from another app causing this. Paste in using ctrl/command + shift + v to paste in as plain text.

If it’s not that it may be due to the length of the heading elements you have. Try removing them to see if your body text becomes responsive.

8

Hey Michael,

Just had a look and the Rich Text block that is giving you issues has a lot of incorrect formatting. I’d suggest going over this lesson - Rich text element overview | Webflow University.

Once you format the text correctly and set paragraph text to something like 16px, the text should sit a bit better :slight_smile: