How To Stop Words from Breaking on Mobile in Divi
In this quick tutorial, I show you how to stop your words from breaking on mobile in Divi. It’s a very common occurrence so if you experience it, you’re not alone! Luckily with just one line of CSS and perhaps a few custom tweaks, you’ll be all set in no time.
Hope this quick tip helps!
Here’s an example of how you can use this trick for headings:
h1, h2, h3, h4, h5, h6 {
overflow-wrap: normal;
}
Other tutorials that might help with this:
Ready to take your web design journey to the next level? I want to help.
Whether it's understanding the technical side of web design like Wordpress and Divi, learning the ins and outs of design, SEO and conversion, following a proven path for web design processes and systems or help with building your web design business, I have a course for you. Click below to check out my suite of web design courses and find out which one will help you level up and help you quickly become a more valuable and confident web designer!
- Josh
Hi, Josh.
Do you know why the layout break occurs when the tablet is viewed horizontally rather than vertically?
mmmm good question. Probably something to do with the width depending on the row/module on horizontal view.
Awesome tip, Josh. Thanks so much!
Thanks, Jason!
Nice Tip Josh.
If this is coupled with a media query to set the max-width to 90vw, will it prevent the overflow by reducing the heading text size?
mmm not sure Donal. Worth a shot!
Hey Josh
I followed the tutorial and when I use the “inspect element” feature to switch to mobile view, most of the text looks good but when I actually pull up the site on my mobile, I see broken words, etc. Am I missing something?
Just be sure to clear your cache or refresh then you should be all set! Sometimes actual phones do appear a little different than inspect element so it does take some fiddling around.
THanks!