Prevent text wrap / text breaks site wide

I'm having issues with headings having breaks in longer words and leaving a few letters left on their own on the next line. I've read lots of similar posts and all of the solves seem to be making each specific ID block have a smaller font size on a specific screen width. But there's too many of those across this site to individually do and doesn't future proof for any other text updates that could be done. Is there a way to have the font size just be responsive to the device in a simpler way?

Password: larvae

Can you share your website URL?

You can turn off auto hyphenation on heading text with this Custom CSS:

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

But I don't think this solves your problem, your headings are just too big to fit on the screen. If I was you I would try reducing the font sizes (maybe just on mobile with CSS) and potentially reduce the site margin as that looks big in your examples.

This would be a way to reduce the size of heading 1 on mobile:

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

Using 2rem will reduce it (probably) but if you were to substitute in 4vw that would make the font size responsive to the width of the viewport. Worth a try!

Thanks Ziggy. Yes, the words are quite long which is tricky.

Sorry, the URL is: arvela-fgs.squarespace.com

It's almost like I need a smaller font size for an iPad size, and then a smaller one again for mobile. 

@Ziggy I've made some changes but still a few spots it's an issue. Is there some CSS code to use so you can force any words that do need to break to have a hyphen and put in parameters like it has to have a minimum of 3 characters on the second line? For example

Sustaina-
ble agri-products

Try this Custom CSS for the third slider section on the homepage:

@media only screen and (max-width:640px) {
  .list-item-content__title {
    font-size: 10vw !important;
  }
}