How to Make Your Buttons the Same Width on Squarespace
A personal pet peeve of mine when it comes to web design is buttons that are different sizes.
When I see two buttons next to each other but they’re different widths, I think it looks messy.
What I usually do when designing websites therefore is use this small piece of custom code to keep all button widths the same.
It’s worth noting that if you use Fluid Engine you can do this easily without code, however if you’re like me and still use the classic editor from time to time then this is a good trick to have up your sleeve.
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
Navigate to Website > Website Tools > Custom CSS and input the following code into your custom CSS box:
.sqs-block-button-element--small, .sqs-block-button-element--medium, .sqs-block-button-element--large {
width: 120px !important;
}
This code is targeting all buttons (small, medium and large) and ensuring they all have the same width. You can, of course, have a play around with the width you choose for this depending on the design style you’re going for.
If you want a different width for different sized buttons, e.g. you want your small buttons to be 200px but want your medium and large buttons to be 250px, you just need to input those lines of code individually, like the example below.
.sqs-block-button-element--small {
width: 200px !important;
}
.sqs-block-button-element--medium, .sqs-block-button-element--large {
width: 250px !important;
}
Adding this code will also impact the buttons you add in Fluid Engine too. For your information, the small button code targets tertiary Fluid Engine buttons, medium targets primary buttons and large targets secondary Fluid Engine buttons.
You can play around with the width you want your buttons to be and once you’re happy, just hit save and you’ll have made all of your buttons the same width, creating a much cleaner and more appealing design style.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
