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
9 years ago · Last reply by Alex S 9 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 9 years, 10 months 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 9 years, 10 months ago

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

  3. Alex S Staff 9 years, 10 months 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 9 years, 10 months 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 9 years, 10 months 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 9 years, 10 months ago

    It didn’t work :(

  7. Alex S Staff 9 years, 10 months 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 9 years, 10 months 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 9 years, 10 months 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 9 years, 10 months 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 9 years, 10 months ago

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

  12. Alex S Staff 9 years, 10 months 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