Squarespace CSS: How to Make Your Buttons the Same Length

Here’s a quick Squarespace CSS Tutorial that I previewed in my stories! I really wanted to make a gorgeous “Links” page that I could put in my Instagram bio, but I was bummed when all of my buttons popped up at different lengths… yeah, not the look I was going for. I did a bit of digging, and here’s what I came up with:

HOW TO MAKE YOUR BUTTONS ALL THE SAME LENGTH USING CUSTOM CSS

how to connect your social profiles to squarespace (2).png

Note: this works best with the Brine and Rally templates on Squarespace.

First off, you’ll want to head on over to the Chrome Web Store and download the free Squarespace Collection/Block Identifier Chrome Extension.

Screen Shot 2019-01-23 at 5.45.59 PM.png

If you’re unfamiliar with this little bit of magic, just pop it in your Bookmarks Tab and open your Squarespace web page.

Once you have your page designed and ready to go, go back to Design > Custom CSS, and copy/paste this little baby at the bottom:

Screen+Shot+2019-01-23+at+5.48.46+PM.jpg
Screen Shot 2019-01-23 at 5.48.55 PM.png


//Button Blocks Width - Links Page//

#collection-5c29d51ecd836676a1a922a7 .sqs-block-button .sqs-block-button-element--medium {
     width: 100%;
     max-width: 390px;
     box-sizing: border-box;
 }

Okay, but don’t go yet! You’ve still got to make a few little baby tweaks before it’s all ready to go on your page.

First off: the #collection piece of the code has to go. Lucky for us, that’s where the Block Identifier Chrome Extension comes in! Give it a click, and your entire screen will be flooded with tiny white boxes. Those are the Block Identifiers, and they can tell the code what to target and change.

Screen Shot 2019-01-23 at 6.02.39 PM.png

To apply the changes to your entire page, click the block way at the top of your screen, like the one above, and replace the #collection-stringofnumbers7770 with the collection code that’s been copied to your clipboard.

Next, you might need to change the little bit of code that says

.sqs-block-button-element--medium

If you’re using a small button block, simple swap out the “medium” to say “small,” or “large” if that’s what you’ve chosen.

Lastly: you might want to play with the width of the box a bit. Simply adjust the code that says

max-width: 390px;

and see what you like!

WHAT ELSE WOULD YOU LIKE TO TWEAK WITH SOME CUSTOM CODE? LET ME KNOW IN THE COMMENTS!

Shoestring+Solopreneur+Banner (8).png

KEEP ON READING