Do you love how easy squarespace is to build on, but hate that it doesn’t come with many customization features?

I get it. It’s probably one of the most irritating things about Squarespace.  Here are five simple fixes to make your Squarespace site looking good!

For these five fixes below, you will need to get familiar with adding custom CSS to your Squarespace site.  Here is how you do that:


Step one:   Log into your Squarespace site and click on Design


Step two: Click on Custom CSS


Step three: enter in the code you wish to add to your site

And then make sure to hit save!


Five Easy Fixes! (copy and paste into your Custom CSS)

  1. How to Centre-Align all buttons on mobile:

    @media screen and (max-width:640px) {
    .sqs-block-button * {
    text-align: center !important;
    }
    }


2. How to Centre-Align all blocks in Squarespace Footer on Mobile & Tablet

@media screen and (max-width:767px) {
footer.sections * {
text-align: center !important;
}
}


3. How To Remove underline from hyperlink

a {
background-image: none !important;
}


4. How to set a Fixed Width for Buttons  (because you want them to be the same width throughout the site)

.sqs-block-button .sqs-block-button-element–large {
width: 50%;
}

*you can change the width percentage to be what you want it to be!
*note this requires you to always select the large button when adding one to your site.


5. How to only have one product per row on Mobile

@media only screen and (max-width: 640px) {
.ProductList-item {
width: 96% !important;
padding-right: 0px;
margin-left: 0px;
float: none;
}
}


There you go!
Do you like these quick CSS tricks? Want to see more? Let me know in the comments what other CSS you want to learn!

Leave a Comment

Your email address will not be published. Required fields are marked *