Ensuring that your website content is mobile-friendly is crucial for providing a seamless user experience across all devices. Text wrapping issues on tablets and phones can disrupt the readability and layout of your content, frustrating your visitors.
In this article, we will guide you through the process of fixing text-wrapping issues on mobile devices.
Text wrapping issues that might happen on Tablets and/or Phones usually have a few common reasons, such as:
The font size is too big for Tablets and/or Phones, which forces the text to break on multiple lines of text - also known as wrapping
Padding is being used to add custom spacing, which might force the text to break on multiple lines of text on Tablet and/or Phones
The text's length. Long words can also force text wrapping on tablets and/or Phones
The Font size is too big
If a big number is used for the font size on tablets and/or phones in a text-based module such as the Text module, the value will most likely force the text to wrap on a second line of text.
Use Case
Inside a Text module, there is an H1 element
The Font Size for the H1 is set to be 60px
While the text looks good on desktop and tablet, on mobile, the text will wrap on 3 lines of text.
Use the Divi's Responsive Settings to fix the text wrapping
Open the Text module that contains the respective text
Go to Design Tab > Heading Text → Heading Text Size
Enable the Responsive Settings
Click on the Phone tab
Set a smaller font size
Padding is being used to add custom spacing
Similar to the font size, if big values are used for the Padding (especially for the padding left and right) options, the text will wrap on multiple lines on tablets and/or phones.
Use Case
Inside a Text module, there is an H1 element
The Text module has the following padding values set:
Top Padding: 120px
Bottom Padding: 120px
Left Padding: 200px
Right Padding: 200px
While the text looks good on a desktop, on a tablet, it will wrap on two lines of text, while on mobile, it will wrap on multiple lines of text.
Use the Divi's Responsive Settings to fix the text wrapping
Open the Text module that contains the respective text
Go to Design Tab > Spacing → Padding
Enable the Responsive Settings
Click on the Phone tab
Change the values for the Left and Right Padding to smaller values or 0.
Text Length
In some cases, text-based modules could contain long words, such as ExtraSuperLongWord.
Even if the font size or the spacing is not changed because of the text length and also because on the phone, the available space into which the Text module is rendered is much smaller compared to tablet or desktop devices, the text will wrap, displaying the last letter on a new line of text on phones.
Use Case
Inside a Text module, there is an H1 element that contains the word ExtraSuperLongWord
While the text looks good on a desktop and on a tablet, it will wrap the last character on a second line of text.
In this specific case, two different options can be used:
Use the Divi responsive settings to lower the font size for phone screens
Use custom CSS code to set the overflow-wrap property to enforce all characters to remain on a single line of text
Use the Divi's Responsive Settings to fix the character wrapping
Open the Text module that contains the respective text
Go to Design Tab > Heading Text → Heading Text Size
Enable the Responsive Settings
Click on the Phone tab
Set a smaller font size
Use custom CSS code to force all characters not to wrap
Open the Text module that contains the respective text
Go to Advanced Tab → Custom CSS → Free Form CSS
Add the following CSS code
selector h1 {
overflow-wrap: normal;
}
Important Note: By using the overflow-wrap rule, the text will display on one single line. However, it will force it to overflow its container, which can lead to another design issue.
In this case, the recommended option is to use a smaller font size for phone devices.