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:
Want more free tutorials and layouts?
I'd love to do more. But as you can imagine, it takes a lot of time and effort to put these together. In order for me to do these, I need to take time away from my business which is what's currently paying the bills. If you'd like to leave a tip and show your appreciation, it would show me that the time I invest in these is worth it and will help keep more coming!
- 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.