This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Word Break Issue on mobile

Resolved 12 replies pluginplugin-page-builderquestion
kathleenberbec
10 years ago · Last reply by Alex S 10 years ago

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:

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

12
  1. Alex S Staff 10 years, 6 days ago

    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.

  2. kathleenberbec 10 years, 6 days ago

    Yes, the website is: http://leroywolf.com

  3. Alex S Staff 10 years, 6 days ago

    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)?

  4. kathleenberbec 10 years, 6 days ago

    Yes, I’m specifically seeing it with just one spot now – where it says “A Fresh Approach”. I am using an iPhone 6. Img

  5. Alex S Staff 10 years, 6 days ago

    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;
}
  6. kathleenberbec 10 years, 6 days ago

    It didn’t work :(

  7. Alex S Staff 10 years, 6 days ago

    Hm. Try:

    h1, h2, h3, h4, h5, h6 {
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  word-break:keep-all;
}
  8. kathleenberbec 10 years, 6 days ago

    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.)

  9. Alex S Staff 10 years, 6 days ago

    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.

  10. Ronald Nunez 10 years, 6 days ago

    @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;
    }

  11. kathleenberbec 10 years, 6 days ago

    Ronald THANK YOU! That worked! I think my custom css was clashing with my child theme css file.

  12. Alex S Staff 10 years, 6 days ago

    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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread