How to stop long words or urls breaking Squarespace blog comments

The problem

Long strings of characters with no spaces, such as urls, can break Squarespace comment layouts. 

To illustrate the problem - here's what happened when I posted a Google Maps url into a blog comment earlier today:

Banner image showing the longest place name in the world breaking out of a page layout. 

Overflowing Squarespace blog comments box. 

The fix

 The fix is to insert a couple of lines of css into the Custom CSS  editor in the Design section of the admin interface. 

 
.comment-body {
word-wrap: break-word !important;
}

The result

The css forces long strings to word wrap when they reach the edge of their container. 

Comments box with the fix applied. 

Colin Irwin

I’m Colin Irwin, a freelance Squarespace Designer & Developer based in London, UK, with clients in the USA and around the world.

I’m a recognised Squarespace expert. I design and build Squarespace sites for everyone from charities and start ups to major established brands.

https://www.silvabokis.com
Previous
Previous

What does the Squarespace Scheduling and Acuity Scheduling Rebrand mean for you?

Next
Next

How to embed a Twitter feed on your Squarespace website easily