Turn off hyphenation in Brine template

Hi all, I'm aware that turning off hyphenation has been looked at elsewhere (for example, https://answers.squarespace.com/questions/37904/turn-off-automatic-hyphenation.html).

But I'm struggling to get that particular code working on the Brine template that I'm using. Hyphens are causing some odd results on mobile, and I'm sure forcing the whole word to the next line will be an improvement. I have tried injecting the following code on the relevant index pages:

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

I've also tried replacing 'manual' with 'none' (as suggested in another thread), without luck.

You can see the site here: https://dominic-mcinerney.squarespace.com/home/

Any advice would be greatly, greatly appreciated!

Hey Octopus, thanks for this. I really appreciate it...caniuse.com is a handy site.

Unfortunately, no luck. The problem occurs on iphone 6 using Chrome (which doesn't support hyphen control) but weirdly also occurs using IOS Safari (which does support it). If I use a browser emulator with the above device / OS, the problem doesn't replicate.

I'm injecting the code onto individual pages sitting under an index page, but not the index page itself. If I inject it into the index page, the text of the code appears at the top of the website (desktop and mobile).

Any other ideas appreciated! :)

Fixed! Thanks so much...watching those words split across two lines was driving me crazy!

Thanks again for your help, you're the best.

I hope you found your answer already, but if not, did you try using the code you already tried and inserting it sitewide instead of on the specific index pages? I'm using Wav which is in the same family as Brine, and adding the above code to Custom CSS instead of the page header injection did the trick!

I just did this (adjusting the code to p, h1, h2, h3 { ) and it worked! Thanks.

I just did this (adjusting the code to p, h1, h2, h3 { ) and it worked! Thanks.

adding one more comment that I just added the code above in my custom CSS (I only used h1 to stop hyphenation of headings in mobile) and it worked for me in the Polaris template, which is part of the Brine family

adding one more comment that I just added the code above in my custom CSS (I only used h1 to stop hyphenation of headings in mobile) and it worked for me in the Polaris template, which is part of the Brine family

This just worked for me in Mentor - thank goodness and thank you!!

This just worked for me in Mentor - thank goodness and thank you!!

thank you @chiron ! Adding h3 worked for Brine (Impact)!

Just worked for me - using Impact as well. Thanks so much!

It worked!!! Thanks @bethybeau!

Great! Thanks!

Hi, Sorry if this is obvious. I have pasted this code in the advanced section of the pages I need to turn off hyphenation and it works. The only problem is I can now see the code at the top of each page - how do I hide this? Thanks so much