Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I’ve read all the threads on this and none of the CSS codes given have fixed my issue at all. On mobile devices, I am seeing headlines split in random spots, instead of breaking at the beginning or end of a word, specifically after a span is being used in an h1 (Hero image widget)
I am running:
Page Builder version 2.4.4
The below code is not doing anything to fix my issue:
Hi Kathleen,
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Yes, the website is: http://leroywolf.com
Hi Kathleen,
I hate to ask this but, can you point me to an exact example? An accompanying screenshot would be a huge help aswell. What device are you testing on (so I can try and replicate it with that)?
Yes, I’m specifically seeing it with just one spot now – where it says “A Fresh Approach”. I am using an iPhone 6.
Hi Kathleen,
Okay thanks – I was able to replicate it. Can you please try changing:
h1,h2,h3,h4,h5,h6 { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; word-break: normal;}To:
h1, h2, h3, h4, h5, h6 { -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; word-break: normal;}It didn’t work :(
Hm. Try:
h1, h2, h3, h4, h5, h6 { -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; word-break:keep-all;}No cigar. I just noticed that it’s also happening in my SiteOrigin Heading > Sub-headline fields too. (Above A Fresh Approach under About LeRoy Wolf and Designations and Specialties.)
Hi Kathleen,
Hm. I’m going to have to forward this one off to Andrew as it’s really hard for me to test this. :( He’s likely just gone to bed so you’ll hear from him over the weekend.
@kathleenberbec,
Just want to help on your problem. I see there are 2 instances on iconmoon.css
You can just add this code which is the previous answer to your problem. Add this to a custom css file to make over priority or you can just add !important.
h1, h2, h3, h4, h5, h6 {
-moz-hyphens: none;
-ms-hyphens: none;
-webkit-hyphens: none;
hyphens: none!important;
word-break: normal;
}
Ronald THANK YOU! That worked! I think my custom css was clashing with my child theme css file.
Hi Kathleenberbec,
I guess I didn’t account for the direct hyphen property as it was working correctly on Android – I presumed it wasn’t being overwritten which, in hindsight, was a mistake.
Well regardless, I’m glad Ronald was able to resolve this issue.