6 Common Squarespace Issues (plus simple fixes)

We all know that Squarespace is incredible for giving the power of website design to the average business owner. That said, the platform has a few limitations and a few things that consistently don’t look quite right without a little code. 

So today I want to walk you through the things I change in nearly every single website I design.

Watch the video to see all 6 of these solved quickly and easily: 

1. Image size on mobile

2. Matching button sizes 

3. Ugly contact forms

4. Embedding newsletter forms from Mailerlite/Flodesk/Convertkit/etc.

5. Off brand & hard to read search bars

6. No sidebar option for blogs/shops/podcasts

See below for the code snippets!

Website Power Hour

$127.00

1. Image size on mobile

// CSS FOR MOBILE //

@media screen and (max-width: 640px){ 
.sqs-block-image {
width: 80%;
margin: 0 auto;
}}

2. Matching button sizes 

// Large Buttons Stretch //

<style>
.sqs-block-button .sqs-block-button-element--large {width: 75%;}</style>

3. Ugly contact forms

// Designing Forms //

.form-wrapper .field-list .field .field-element{
  border:none;
  border-bottom: 3px solid;
  border-color: #8f85cc;
  background: rgba(143, 133, 204, 0.2);}

4. Embedding newsletter forms from Mailerlite/Flodesk/Convertkit/etc.

This takes a little bit of header code from your email marketing software and a little inline code (that will go “inline” to where you want the form to live).

Here are tutorials from the most popular email platforms:

• MailerLite

• Flodesk

• ConvertKit

5. Off brand & hard to read search bars

// PRETTY SEARCH BAR //

.search-input {background-color: #e5e1dc!important;}
.search-input {background-color: #e5e1dc!important;opacity:1!important;}
.search-input {border-left:none!important; border-top:none!important;
border-right:none!important; border-bottom: 2px solid #51182b!important}
.search-input{color: #51182b!important}
.sqs-search-preview-ui .sqs-search-ui-result .search-result-notice {box-shadow: 2px 2px #000000}
.sqs-search-preview-ui .sqs-search-ui-result .search-result-notice {text-transform: uppercase!important}

6. No sidebar option for blogs/shops/podcasts

In Squarespace 7.1 there are no sidebars for blogs and some templates in 7.0 don’t have them either. However, they are so important to help guide and direct your users - especially if you have loads of products in your shop or a lot of blog posts or podcast episodes. 

I invested in a plugin from Omari over at SQSP Themes that allows me to add gorgeous, branded sidebars to websites with ease! 

Note: Make sure to change colors like #51182B to your brand color code throughout the above!

PIN IT