Heading Spacing in Mobile View Not Changing

[Savannah1 (Savannah)]

When I double click the header text it will put the spacing I want, but then it goes back to spilling off screen once I click away. I have tried playing with spacing and breaking but I cant seem to get anything to make the text not go off screen.

---

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

[imtiazraqib]

Hey @Savannah1, can you please share a read-only link to your project so we can troubleshoot the issue for you.

How to Enable a Webflow Share Link

If you’re new to the Webflow forum, welcome! Anyone with the read-only link of your project can explore your project in the Designer. Any changes they make while in read-only mode will not be saved. This is helpful when you need design advice or when you need help troubleshooting an issue in your project. [Create and use a read-only share link — Webflow tutorial]

[Savannah1 (Savannah)]

https://preview.webflow.com/preview/celebrityrealtor?utm_medium=preview_link&utm_source=dashboard&utm_content=celebrityrealtor&preview=f7c343908d9b79cb9a7aa6a1f708b0c1&workflow=preview

Thank you for the quick response!

[imtiazraqib]

Hey @Savannah1, so from my inspection, one of the main reasons why your text feels like is going off-screen is because your Footer Flex Container is going off the viewport which cause the Heading to think there is space so it does not break.

Detailed below are few design changes that would help:

1. First select your Footer Flex Container (in tablet mode) and move the Logo Image from the container into the Footer Flex Container. I know it may look like a mess right now but bear with me.

2. Select each content within the Footer Flex Container and remove any padding and/or margins. Set the margins of the Footer Flex Container as 0 as well. You should get a result as such:
   

   

3. Switch the view to mobile mode and select your Footer Flex Container. Head over to the design panel and switch the flex direction to vertical and align: centre; justify-content: centre and also set a top margin of 100. Centre the text of your content as needed within the divs and your result should look as such:
   

   

Once you follow these steps, you will not have any overflowed content and you should have normal breaks for your Heading Jumbo. Make sure to remove any fixed width styling for Intro Header or the Heading Jumbo.

Hope this helps! Let me know if you have any questions though.

P.S. a quick tip on typography, change the typography line height of Heading Jumbo from px to unitless, such as 1-. This will give you consistent line heights for text breaks and is more efficient.

[Savannah1 (Savannah)]

Thank you! However, I did all of this but the header is still stuck going off screen… I thought I did everything correct. Could you possibly check again? @imtiazraqib

[imtiazraqib]

Hey @Savannah1, seems a bit odd. I fixed by going into Desktop mode and typing the header as you want it on the mobile view:

And then switching it to the single line in desktop mode:

This workaround fixes the line-break in mobile mode for me:

[Savannah1 (Savannah)]

@imtiazraqib thank you so much!