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.
Hey @Savannah1, can you please share a
read-only link to your project so we can troubleshoot the issue for you.
Thank you for the quick response!
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:
First select your
Footer Flex Container(in tablet mode) and move the
Logo Imagefrom the container into the
Footer Flex Container. I know it may look like a mess right now but bear with me.
Select each content within the
Footer Flex Containerand remove any
margins. Set the margins of the
Footer Flex Containeras
0as well. You should get a result as such:
Switch the view to mobile mode and select your
Footer Flex Container. Head over to the design panel and switch the flex direction to
align: centre; justify-content: centreand also set a top margin of
100. Centre the text of your content as needed within the
divsand 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
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
unitless, such as
1-. This will give you consistent line heights for text breaks and is more efficient.
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
Hey @Savannah1, seems a bit odd. I fixed by going into
Desktop mode and typing the header as you want it on the
And then switching it to the single line in
This workaround fixes the line-break in mobile mode for me:
@imtiazraqib thank you so much!
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.