How to create equal-width buttons in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial will show you how to create equal-width buttons on your Squarespace website.

The code’s in this tutorial are for on page buttons; primary, secondary, and tertiary. When this video was recorded, those buttons went by the titles of small, medium, and large, but the codes are still the same!

You can use this same code for other button styles, like form submit buttons, by replacing the code name .sqs-block-button-element with the name for the button you want to apply this code to.

Here are the codes:

This code below will make all your buttons 200px in width. You can adjust the pixel width (px) to be a percentage (80%) or a vw (10vw) or any other value you want to use!

.sqs-block-button-element {width: 200px}

Ready to apply this to just the mobile version of your site?

Add the media query to make sure it only applies to screens smaller than 640px in width.
Pro tip: I like to use the value 80% for this code.

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