Removing Auto Hyphen from mobile view

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

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;
		}
	}
}

This solution is GOLD! 

Thank you Colin.Irwin

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/

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/

 

 

Try this new CSS code

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

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

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
}