Make Squarespace Buttons the Same Width
I’m so happy to host Kerstin Martin on the blog today! I purchased Kerstin’s SEO Plus course about a year ago and after some solid work, I currently rank in the top Google search results for “Squarespace web design.” Later, I hired Kerstin for an Ask Me Anything session and was impressed with her expertise in Squarespace and her attitude of collaboration over competition. It’s a pleasure to have her share one of her frequently used Custom CSS snippets here. Read her tips on button width in Squarespace, then stick around to learn more about Kerstin and her courses. You’ll add the code Kerstin provides below to Design > Custom CSS.
Buttons in Squarespace are sized in proportion to their text content. Which is why I often try to make the text the same length if I have more than one button next to each other. However, that is not always practical, in which case you might prefer for the buttons to always be the same size.
Buttons Before Custom CSS
Buttons After Custom CSS
You achieve this affect by applying a width setting for the different button containers. Feel free to play around with the width as well, anything between 65-85% works well. Here is the code, this should work with most templates:
/* Small Button Styling */
.sqs-block-button-element--small {
width: 80% !important;
}
/* Medium Button Styling */
.sqs-block-button-element--medium {
width: 80% !important;
}
/* Large Button Styling */
.sqs-block-button-element--large {
width: 80% !important;
}Important: Make sure you check the buttons on all your pages, especially if you’re using a sidebar. For instance, I was using a template from the Brine family together with the Sidebar Plugin and noticed that my 80% button width was too wide for the sidebar. So I targeted the sidebar page specifically to make the buttons a little smaller. Example code:
#collection-ID .sqs-block-button-element--medium {
width: 70% !important;
}Replace the #collection-ID with your own collection number. Happy CSS tweaking!
Kerstin Martin is a Squarespace Expert and Online Educator and officially endorsed by Squarespace as an Authorized Trainer. Her popular online classes help both beginners and advanced users build beautiful websites, eCourses and thriving businesses with Squarespace. Kerstin believes in a heart-centered approach to business: providing great service and delivering high quality content and training is at the core of everything she does. As her client or student you will always be seen and heard.
Website | Instagram | Facebook
