macandernie Posted March 11, 2016 Share Posted March 11, 2016 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! Link to comment
macandernie Posted March 12, 2016 Author Share Posted March 12, 2016 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! :) Link to comment
macandernie Posted March 16, 2016 Author Share Posted March 16, 2016 Fixed! Thanks so much...watching those words split across two lines was driving me crazy! Thanks again for your help, you're the best. Link to comment
bethybeau Posted July 10, 2017 Share Posted July 10, 2017 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! Link to comment
chiron Posted August 3, 2017 Share Posted August 3, 2017 I just did this (adjusting the code to p, h1, h2, h3 { ) and it worked! Thanks. Link to comment
chiron Posted August 3, 2017 Share Posted August 3, 2017 I just did this (adjusting the code to p, h1, h2, h3 { ) and it worked! Thanks. Link to comment
jonberrydesign Posted August 27, 2017 Share Posted August 27, 2017 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 Link to comment
jonberrydesign Posted August 27, 2017 Share Posted August 27, 2017 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 Link to comment
Helen Posted August 28, 2017 Share Posted August 28, 2017 This just worked for me in Mentor - thank goodness and thank you!! Link to comment
Helen Posted August 28, 2017 Share Posted August 28, 2017 This just worked for me in Mentor - thank goodness and thank you!! Link to comment
iamwarehime Posted April 29, 2018 Share Posted April 29, 2018 thank you @chiron ! Adding h3 worked for Brine (Impact)! Link to comment
kmccurdy Posted June 12, 2018 Share Posted June 12, 2018 Just worked for me - using Impact as well. Thanks so much! Link to comment
Felix27 Posted July 25, 2018 Share Posted July 25, 2018 It worked!!! Thanks @bethybeau! New Yorker in Madrid. Link to comment
Soi55Lifestyle Posted August 1, 2019 Share Posted August 1, 2019 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 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.