How to Make Buttons the Same Width in Squarespace
Have you created your own “link in bio” page in Squarespace to use on Instagram? Smart move! That way, people are taken directly to your site, you can use your own branding, and you don’t need an external tool like Linktree.
But…
If you place multiple buttons one below the other, it often looks cluttered. One button is short, another is long. In short, the widths vary. That doesn't look good visually—especially on mobile.
The solution: a piece of code
Place this in the Header Injection section of your “link in bio” page.
Go to your “link in bio” page > Settings (gear icon) > “Advanced” tab > Header Injection.
Check which button you're using (Primary, Secondary, or Tertiary) and copy and paste one of these codes there:
For Primary buttons:
<style>
.sqs-block-button-element--medium {width: 280px !important;}
</style>
For secondary buttons:
<style>
.sqs-block-button-element--large {width: 280px !important;}
</style>
For Tertiary buttons:
<style>
.sqs-block-button-element--small {width: 280px !important;}
</style>
You can adjust the width of the buttons by changing the number in the code.
For the best results, select "Fit" instead of "Fill" on the Design tab of your Button Block.
