How to stop words splitting to a new line on mobile devices

Hi Squarespace community,

I have been going through the forums and it sounds like quite a few people have had the same problems. In passages of text, while viewed on mobile devices, my text keeps splitting mid word, forcing parts of the word onto the line below. I have managed to fix part of the problem using the code below, this fixed when view in portrait, but now I find when viewed in landscape the issue persists.  

See the screenshot attached.

Any help fixing this would be greatly appreciated

Thanks,

Andre

p,h1,h2,h3 {
    -webkit-hyphens: manual !important;
    -moz-hyphens: manual !important;
    -ms-hyphens: manual !important;
    hyphens: manual !important
}

@media only screen and (max-width:767px) {
  h1 {
    font-size:2rem;
  }
}

Can you share your website URL?

sure, here it is: https://www.andregarside.com/

It seems the mobile is fine from what I can see. Tablet view is the problem that I can see, I would suggest making individual text blocks for the huge headings and making those blocks full width rather than constrained like the paragraph text, if you need to add manual line breaks to get the style you want then do that and you can remove these on mobile with this CSS:

@media only screen and (max-width:640px) {
  h1 br, h2 br, h3 br {
    display:none;
  }
}

Great, I will give that a go.  Thanks for your help Ziggy, I really appreciate it!