All Collections
FAQ's and Troubleshooting
My text is wrapping / not looking good on Phones
My text is wrapping / not looking good on Phones

Prevent text from wrapping on mobile

Marius avatar
Written by Marius
Updated over a week ago

There could be several reasons why a text is not looking good on mobile phones.

Reason #1. Font size

The text content (Text Module, Blurb Module, Call to Action, etc) has a big font size. While this might work perfectly fine on a Desktop, we need to remember that on Phones or even tablets, the available space where that text is being displayed is much smaller than on a desktop.

Divi's responsive settings can be used to adjust the font size of Text elements for Tablets and Phones.

If different values for the Tablet and/or Phones are not defined, the text font size will be inherited from the Desktop view.


For example, the font-size value was set to 50px for the Desktop view. If the Responsive Settings are not used, the same 50px value will be used for Tablet and Phone view.

Checking the Phone view, the text doesn't look good.

That's because the same 50px value is inherited from the Desktop view, and, on the Phone, the text will be split into two lines due to the lack of space.

To fix this, the responsive settings can be activated for the option that needs to be changed - in this case, the font size - and a smaller font size can be set for Tablet and/or Phone view.

The responsive settings can be enabled by hovering over the option name for which the changes are required and clicking on the phone icon.

Once the responsive settings are enabled, the font size can be set independently on all three devices: Desktop, Tablet, and Phone.

Reason #2. Spacing

A similar issue could happen if different spacing options are not changed responsively.

Just like in the previous example, if a Module has too much space (padding), the text content will not have enough room to be displayed correctly on smaller devices.

In the following example, the Text module has a 220px set for all Padding values (top, right, bottom, left). That might look good on a Desktop:

But not so good on Mobile: 

To fix this, the responsive options have to be activated for the Padding Option, and the initial 220px value changed to a smaller value.

Reason #3: Long words

In some cases, text-based modules could contain long words.

For example, a word like ExtraSuperLongWord

Because the available space is much smaller on Phones than on Desktop, the text will be broken, and the last letter will be displayed on a second line. This can be fixed by making sure that a smaller font is being used and the available space where that text is being displayed. Using the responsive options for Text Size and Padding would help display the text on a single line.

Custom CSS can also be used to prevent the text from breaking on the Phone viewport and to show it in one line. 

First, a custom CSS class should be set on the Module. This can be done by editing the module settings and going to Advanced Tab > CSS ID & Classes > CSS Class. With the custom CSS class set, the following CSS code can be used:

For paragraphs:

.dt-custom-text p {
overflow-wrap: normal;
}

For Heading 1:

.dt-custom-text h1 {
overflow-wrap: normal;
}

For Heading 2:

.dt-custom-text h2 {
overflow-wrap: normal;
}

All the way down to H6.

In the above CSS examples, the module had the dt-custom-text class name set in Advanced Tab > CSS ID & Classes > CSS Class.

The downside of this will be that the text is forced not to break, which will overflow its parent container and will make the design look uneven.

Did this answer your question?