Jump to content

Removing Auto Hyphen from mobile view

Recommended Posts

I've seen a work around for preventing this by adding CSS code in the page headers but it doesn't work for me


 
  1. /* Hyphens */
  2. p {
  3. -webkit-hyphens: manual !important;
  4. -moz-hyphens: manual !important;
  5. -ms-hyphens: manual !important;
  6. hyphens: manual !important;
  7. }

 

I use the Hyde template and my home page (where the problem lies) is in Index format with parallax scrolling.

Is it the Hyde template that is preventing this code from working?

Many thanks

Link to comment

Try adding this to the custom css area, after any other code that may be there. Also remove your code.

 

@media only screen and (max-width: 768px) {
	body {
		h1,h2,h3,p,li,a,em,i,strong {  
			-webkit-hyphens: none !important;
			hyphens: none !important;	
		}
		.page-desc p {
			-webkit-hyphens: none !important;
			hyphens: none !important;
		}
	}
}

 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 3 weeks later...
  • 2 years later...
On 10/21/2019 at 9:09 PM, colin.irwin said:

Try adding this to the custom css area, after any other code that may be there. Also remove your code.

 

@media only screen and (max-width: 768px) {
	body {
		h1,h2,h3,p,li,a,em,i,strong {  
			-webkit-hyphens: none !important;
			hyphens: none !important;	
		}
		.page-desc p {
			-webkit-hyphens: none !important;
			hyphens: none !important;
		}
	}
}

 

Hi, the hypenation code does not work for me. can you please help. heres my client's website e mail:

https://www.thetutoress.com/

 

IMG_4011.png

IMG_4012.png

IMG_4013.png

Link to comment
On 12/8/2021 at 1:17 AM, Asiya said:

Hi, the hypenation code does not work for me. can you please help. heres my client's website e mail:

https://www.thetutoress.com/

 

 

IMG_4011.png

IMG_4012.png

IMG_4013.png

Try this new CSS code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...
On 9/8/2024 at 1:48 AM, Hill said:

Did this work for anyone? I'm wondering how to get rid of hyphenated headings on mobile site?

You can use this to Website Tools > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.