How To Change Width Of Blog Squarespace

My 4 Go-To CSS Tricks for Squarespace Website Design

Whenever I'm designing a new website, there are a few code snippets that I always use to improve the overall user experience in a subtle yet impactful way.

Annoyingly, these aren't things that you can change in Squarespace's default Site Styles, but thanks to a bit of Custom CSS, you can! Today I'm sharing with you my go-to CSS tricks that you can use, whether you're using Squarespace 7.0 or 7.1.

To use these copy + paste CSS codes, go to:

Design > Custom CSS > Paste in the editor > Save!

My top 4 go-to CSS tricks for Squarespace website design | blog post by Dmarzdesigns

Prevent text hyphenation

Hyphens are horrible.

I can't begin to describe how much it hurts to see hyphens breaking up words on beautiful websites, especially on mobile, as it creates readability issues when words break and wrap in unwanted places. This piece of CSS removes that and fixes the readability issues that hyphens can create.

/*------------------------------------  *   REMOVE TEXT HYPHENS 7.0  *------------------------------------*/ p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important;   }  /*------------------------------------  *   REMOVE TEXT HYPHENS 7.1  *------------------------------------*/ p1, p2, p3, h1, h2, h3, h4 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important;   }

Adjusting the blog post width

One issue I frequently see with blog posts is when the text runs from one side of the screen to the other. The downside of this? The text is much harder to read, as your eyes get fatigued trying to reach the end of each line. You'll find yourself reading the same thing over and over again, quickly getting frustrated and closing the page, not finishing what you were reading.

This fix helps by shrinking your blog posts' default width to a more comfortable, optimal line length. Ideally, you want your line length to be around 45-75 characters (letters), including spaces. You can check this out by using any free online word counter.

/*------------------------------------  *   CUSTOM BLOG POST WIDTH 7.0  *------------------------------------*/  .BlogItem { max-width: 750px; margin: 0 auto; }  /*------------------------------------  *   CUSTOM BLOG POST WIDTH 7.1  *------------------------------------*/ .blog-item-wrapper .blog-item-inner-wrapper { max-width: 750px; margin: 0 auto; }

The max-width value is what adjusts the width of your blog. You can change this number as you wish, noting that a number larger than 750px makes your blogs wider, and a number lower makes it look more constrained.

Note: In Squarespace 7.1, you can now edit the width of blog posts using the Format menu, but you can still set the maximum width you would like using the CSS above.

Hide the header and footer

This is useful when you're looking to create a single page with a specific goal in mind, for example:

Having your own Instagram links page (and avoiding using Linktree).
Getting website visitors to sign up for your email list.
Selling your services or products via a dedicated sales page.

If you want your website visitors to complete a given action like joining your email list, for example, it's considered best practice to provide them with one call-to-action option on that page. Removing all other potential distractions (like your header and footer navigation links) reduces the likelihood that they'll click away and increases the possible conversion.

IMPORTANT NOTE: Instead of pasting this under Custom CSS, this should be placed underAdvanced in thePage Header Code Injectionunder the individual page's settings. You access this by clicking the gear icon next to the page name. Avoid putting this in the site-wide Code Injection area, as this will switch off the header and footer for your entire site.

The gear icon to access the individual page settings.

The Page Header Code Injection Area in Squarespace.

<style> .Header, .Footer, .Mobile-bar { display:none !important;  } </style>

Adjust the sizing of buttons

Squarespace gives you three buttons by default (small, medium, large) that you can use anywhere on your site. In the default Site Styles, however, the only styling you can change is the shape, colour, and fonts, not the buttons' sizing.

If like me, you want more control over these sizes, this is for you. The code below will change all of your buttons to be the same size, but the padding can be adjusted as you see fit.

/*------------------------------------  *   BUTTON STYLING 7.0 + 7.1  *------------------------------------*/  /* Small button */ .sqs-block-button .sqs-block-button-element--small {   padding: 10px 20px;  }  /* Medium button */ .sqs-block-button .sqs-block-button-element--medium {   padding: 10px 20px;   }  /* Large button */ .sqs-block-button .sqs-block-button-element--large {   padding: 10px 15px; }

To customise these, you'll want to tweak the padding numbers. The first number (e.g. 10px) affects the top and bottom padding of the buttons. The second number (20px) affects the left and the right. Play around with these until you hit your desired button sizing.

And that's it! I hope you find these Squarespace website CSS tricks useful as much as I do! If you have any questions or need help with any of these, drop me a comment below.

Latest On The Blog

The Business Proposal Podcast Interview

Online Business, Branding

Dominique Marshall

16 April 2021

Why Brand Strategy Matters

Branding, Online Business

Dominique Marshall

22 February 2021