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.
Frequently Asked Questions
-
This usually happens when the button block is set to “Fill” instead of “Fit.” Fill stretches the button to the full width of its container, while Fit uses the size set in your Site Styles. To fix this, edit the button block and select Fit under the Design tab.
-
Squarespace 7.1 does not allow manual adjustment of button sizes for desktop vs. mobile, but buttons automatically resize responsively. Choosing Fit helps maintain consistency across devices.
-
These are style presets you can customize in Site Styles. Use them to create visual hierarchy—for example, use Primary for CTAs, Secondary for less important actions, and Tertiary for minimal links or navigation.
-
To ensure consistency, edit all button styles (Primary, Secondary, Tertiary) in Site Styles, and always use the “Fit” option in the button block settings when adding buttons to a page.
-
Yes, Squarespace allows custom CSS for more advanced button styling. This is useful for specific tweaks like animations, hover effects, or applying the same style across multiple blocks. However, most button styling can be done without code using Site Styles and block settings.
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.
