How to create buttons with equal width in Squarespace

This tutorial will show you how to create equal width buttons in your Squarespace website. In some cases, you may want the button to have equal width in order to enhance the appearance of your website.

Complexity: Easy

The code below ensures all your buttons in the site to be 150px. Note that the width can be adjusted in (px), percentage (75%) or viewport width (12vw).

From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.

.sqs-block-button-element {width: 150px} - Pixel

.sqs-block-button-element {width: 75%}  - Percentage

.sqs-block-button-element {width: 12vw)} - Viewport Width

To target particular buttons sizes which in this case are small, medium and large, simply use the following codes

Small -> .sqs-block-button-element--small {width: 150px}
Medium -> .sqs-block-button-element--medium {width: 150px}
Large -> .sqs-block-button-element--large {width: 150px}

To apply this for the mobile version only use the code below. I suggest using the percentage option here.

@media only screen and (max-width:640px) { 
  .sqs-block-button-element {width: 75%}
}

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of merchantability and warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a Developer.