Why is the text not wrapping within the div in Webflow, causing it to expand vertically in mobile view?

If text is not wrapping within a div in Webflow and is instead expanding vertically in mobile view, it is likely due to CSS properties affecting how the content behaves inside the container. Here’s how to identify and fix the issue.

1. Check the white-space and overflow Properties

• Go to the Style panel in Webflow.
• Under the Typography section, ensure that white-space is set to normal (not nowrap), which forces text to wrap.
• If text is overflowing, set overflow to visible, hidden, or auto (instead of visible if necessary).

2. Adjust the max-width or width of the Div

• Ensure the div’s width is not set to 100vw (viewport width), as that forces unnecessary horizontal growth.
• Change the width to 100% instead of a fixed pixel size that may not adapt to mobile screens.
• If needed, set a max-width (e.g., max-width: 100%) to prevent excessive growth.

3. Inspect display: flex and flex-wrap

• If the div is a flex container, go to the Layout section in Webflow.
• Ensure flex-wrap is set to wrap so content breaks properly instead of forcing a single line.

4. Check for Fixed Height on the Div

• If the div has a static height (e.g., 200px), text might overflow vertically.
• Set height to Auto so it expands naturally with the text.

5. Review Margins and Padding

• In mobile view, margins or padding that are too large may affect text wrapping.
• Adjust padding under the Spacing section if necessary, especially on smaller breakpoints.

6. Use word-break if Necessary

• If long words (e.g., URLs) are causing overflow, go to Advanced Typography in the Style panel.
• Set word-break: break-word to break overly long words in mobile view.

Summary

Ensure the text has white-space: normal, set the div’s width to 100%, enable flex-wrap if using flexbox, use auto height, and adjust padding or word-break settings for better responsiveness.