Some text breaks correctly, others overflow outside the screen

[thaoii (Thao My)]

Hi everyone,
I’m running into a strange issue with text wrapping.

On some sections, my paragraphs and headings wrap nicely within the container, but in other sections (especially on mobile), the text doesn’t break. It overflows outside the viewport instead of wrapping to the next line.

I’ve checked the typography settings

, but it still happens randomly on some elements.

Does anyone know what could cause this inconsistency?
Could it be inherited styles, flex settings, or overflow properties on parent containers?

Thanks in advance!

---

Here is my site Read-Only:
https://webflow.com/design/new-reving?utm_medium=project_link&utm_source=designer&utm_content=new-reving&workflow=comment&pageId=6911fd3313201d1c5cae2713

[ahmed_moeed (Webflow Developer)]

@thaoii , The read-only link seems to be broken. Could you please share the correct one?

[thaoii (Thao My)]

Oh, thanks for letting me know and sorry about that! :)
Here is the correct link:

Webflow - Reving – Zukunft des Bauens

[ahmed_moeed (Webflow Developer)]

@thaoii , I need you to provide Live website URL

[AJ_Dev (from Memberstack)]

Hey @thaoii ,

You could probably modify the styling as shown in the screenshots below:

• Select Grid settings for the uui-layout20_item-list 2

• Set the grid settings as follows:

• Set the heading element’s line breaking property as:

• Set the uui-page-padding 63 element’s padding as follows:

This should fix the layout for the section you have updated styling for. Follow similar approach for sections which are overflowing and it should fix your issue.

Hope this helps.

[thaoii (Thao My)]

hey @AJ_Dev, thanks so much for the clear guidance! That fixed the section I updated.
Quick follow-up: what’s the best way to handle this when the element isn’t within a grid?
Really appreciate your help and sorry for the inconvenience
Thanks in advance!

Webflow - Reving – Zukunft des Bauens

[ahmed_moeed (Webflow Developer)]

@thaoii

1- for small screen reduce the padding left, right so you have more space.

2- Remove the max-width

3- make the fonts a bit smaller also apply Breaking: break-all

[AJ_Dev (from Memberstack)]

Hey @thaoii ,

Glad it helped.

For the heading, you can probably set the size as highlighted in the screenshot below, to ensure that it does not look huge on mobile devices and also does not overflow the section it is currently in.

Hope this helps.

[thaoii (Thao My)]

Thank you guys! This helped a lot