Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
macandernie

Turn off hyphenation in Brine template

Question

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!

Edited by macandernie
Initial Revision

Share this post


Link to post

12 answers to this question

Recommended Posts

  • 10

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!

Share this post


Link to post
  • 0

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! :)

Share this post


Link to post
  • 0

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


motion graphic designer in SoCal - feel free to check out my site (built on the Polaris template): [motion graphic design by jonberrydesign][1] [1]: http://jonberrydesign.com

Share this post


Link to post
  • 0

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


motion graphic designer in SoCal - feel free to check out my site (built on the Polaris template): [motion graphic design by jonberrydesign][1] [1]: http://jonberrydesign.com

Share this post


Link to post
  • 0

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


www.soi55lifestyle.com

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...