Jump to content

Prevent text wrap / text breaks site wide

Recommended Posts

I'm having issues with headings having breaks in longer words and leaving a few letters left on their own on the next line. I've read lots of similar posts and all of the solves seem to be making each specific ID block have a smaller font size on a specific screen width. But there's too many of those across this site to individually do and doesn't future proof for any other text updates that could be done. Is there a way to have the font size just be responsive to the device in a simpler way?

Password: larvae

Screen Shot 2023-11-01 at 3.13.15 PM.png

Screen Shot 2023-11-01 at 3.12.50 PM.png

Screen Shot 2023-11-01 at 3.12.42 PM.png

Link to comment
  • Replies 4
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Can you share your website URL?

You can turn off auto hyphenation on heading text with this Custom CSS:

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

But I don't think this solves your problem, your headings are just too big to fit on the screen. If I was you I would try reducing the font sizes (maybe just on mobile with CSS) and potentially reduce the site margin as that looks big in your examples.

This would be a way to reduce the size of heading 1 on mobile:

@media only screen and (max-width:767px) {
  h1 {
    font-size:2rem;
  }
}

Using 2rem will reduce it (probably) but if you were to substitute in 4vw that would make the font size responsive to the width of the viewport. Worth a try!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy I've made some changes but still a few spots it's an issue. Is there some CSS code to use so you can force any words that do need to break to have a hyphen and put in parameters like it has to have a minimum of 3 characters on the second line? For example

Sustaina-
ble
agri-products

Link to comment

Try this Custom CSS for the third slider section on the homepage:

@media only screen and (max-width:640px) {
  .list-item-content__title {
    font-size: 10vw !important;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.