Tagged: mobile responsiveness, text wrap
I’m running Enfold 4.5.2 with the Enfold Child theme and there seems to be a mobile responsiveness issue with text blocks in the color sections on one of my pages. The text runs off the page and I can’t even scroll left or right to see the part that’s cut off. I’m seeing the problem on my Google Nexus 5/Android 8.1.0, but it’s also apparent on an iPhone.
Here’s the page:
The text is cut off on “Memorable Meals”, “Stress-Free Celebrations” and “Great Connections.” The rest of the page looks fine.
Is there any way to make the text wrap better on mobile?
Hey diypaleo,
One solution is to add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
h2 span {
word-wrap: break-word !important;
}
But it may look better if you lowered the font size for the h2 in mobile view also.
@media only screen and (max-width: 767px) {
h2 span {
word-wrap: break-word !important;
font-size: 46px !important;
}
}
Best regards,
Mike
Worked like a charm. Thanks so much!
Hi,
Glad to hear, I assume we can close this now, but I like to ask first. Shall we close this then?
Best regards,
Mike
Yes, you can close it. Thanks for asking.
Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.
For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)
Best regards,
Mike