How to Edit Button Sizing in Squarespace 7.1
Buttons may seem like a small part of your website—but they play a huge role in usability and conversions. Whether it’s a call to action, contact prompt, or shop button, having the right button size can make or break your design.
You might think adjusting a button’s size in Squarespace is straightforward—and in some ways, it is—but if you don’t know where to look, you might find yourself stuck with buttons that appear larger (or smaller) than expected.
In this post, we’ll walk you through how to edit button sizing in Squarespace 7.1, and explain why your buttons might still look off even after adjusting site-wide styles.
Steps to Edit Button Size in Site Styles
The first place to edit button sizing is in Site Styles—this allows you to set a consistent design across your website for all button types (Primary, Secondary, Tertiary).
Here’s how to access those settings:
Log in to Squarespace and select the website you want to edit.
Navigate to Site Styles.
In the left-hand panel, scroll down and click on Buttons.
From here, you can edit the style and size of all three button types:
Primary
Secondary
Tertiary
Adjust padding, corner radius, and more until you’re happy with the look.
You might assume that’s all you need to do—but there's one more step that’s easy to overlook.
Why Your Button May Still Appear Too Large
Let’s say you’ve adjusted your button sizes in Site Styles. But then you go to add a button on a page using “Add Block” and suddenly the button appears much larger than you set it.
This is a common issue—and fortunately, there’s a quick fix.
Steps to Adjust Button Size on a Page Block
Here’s how to make sure your buttons appear the size you set in Site Styles:
Go to the page where you want to add or edit a button.
Click Edit on the section you’re working in.
Scroll to or hover over the area where you want the button and click Add Block.
Select the Button block.
Hover over the new button and click the pencil icon to open its settings.
Navigate to the Design tab within the button block.
Under Design, choose either Fill or Fit:
Fill will stretch the button to fill the full width of the block, making it appear larger.
Fit will apply your Site Style button settings (the size and style you set earlier).
Select Fit if you want the button to match your site-wide settings.
Click Apply and then Save the page.
Our Experience With This
We often get clients asking why their buttons look oversized—even after setting a style globally. It’s a small detail that can trip up even experienced Squarespace users. Once you know about the Fit vs Fill setting inside the button block, you’ll have much more control over how your buttons appear site-wide.
Need Help? Contact Razor Web Design
If you're struggling with button styles, layout inconsistencies, or want your Squarespace site to look polished and professional, Razor Web Design is here to help. Whether it’s a quick fix or a full design overhaul, we’ll help you get every detail just right.
