How to Remove Hyphens on Your Mobile Website

Want an easy update that will make a big impact on your website’s design? This post is one of those!

When we’re designing websites, we focus mainly on the desktop design, making sure everything looks just right. And that makes sense - you sit down at your desktop or laptop to design. But like I talked about on this episode of Process to Profitability, mobile design is also very important.

When designing a website on Squarespace, the mobile design is automatically created based on where you place different blocks. You can control some of the design settings based on mobile devices, but it’s not as easy as on other platforms.

One of the most common requests that I get from clients is to remove hyphens from headlines on mobile. Squarespace automatically adds hyphens to text on mobile when the text is large, so while a headline might look great on your computer, it doesn’t look as nice on a phone.

If that’s the case, you can remove the hyphens by adding the following code to your website’s Custom CSS:

/* Remove Hyphens */  
h1 {    
   -webkit-hyphens: manual !important;       
   -moz-hyphens: manual !important;        
   -ms-hyphens: manual !important;            
   hyphens: manual !important;  
   }   

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

h3 {    
   -webkit-hyphens: manual !important;       
   -moz-hyphens: manual !important;        
   -ms-hyphens: manual !important;            
   hyphens: manual !important;  
   }

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

If you’re using Squarespace 7.1, be sure to add the same code for H4.

h4 {    
   -webkit-hyphens: manual !important;       
   -moz-hyphens: manual !important;        
   -ms-hyphens: manual !important;            
   hyphens: manual !important;  
   }

This simple update can make a big difference to your mobile design. And remember to always check to see what your website looks like on mobile before you launch your website (or when you make changes to a page). Even simple updates can change the way the mobile design lays out, and you don’t want to have things out of order without knowing it.