How to create buttons with equal width in Squarespace

This tutorial will show you how to create buttons with equal width 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 the buttons on the site will 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 and 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 button 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, expressed 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.