How to Change Button Size on Image Blocks in Squarespace 7.1

Do your buttons on Squarespace image cards, image collages, or image stacks look too large?

These instructions are for the newest version of Squarespace v7.1.

I’ve run into this recently on every Squarespace 7.1 site I’ve created. For example, I just launched a site for a Concierge Moving Service in Austin, and here is a screenshot of the Image Collage before:

The button looks disproportionately large here. And it looked even worse when you saw it in the context of the whole site.

Here’s the after screenshot, with the button an appropriate size that matches the other buttons on the website:

Add Custom CSS

This is an easy fix. You’ll just want to copy and paste some code into Design > Custom CSS:

Use this code to start, then adjust the numeric value of the font size until you find one that works for your website:

/* change image button size */
.image-button, .image-button.sqs-dynamic-text {
    font-size: .7em !important;
  }

UPDATE MAY 2022: Squarespace is rolling out backend code updates. If the above code no longer works on your site, use this code instead:

.image-button, .image-button.sqs-dynamic-text .sqs-button-element--primary {
    font-size: .7em !important;
  }

This code works for every type of Squarespace 7.1 image block that allows for buttons: Poster, Card, Overlap, Collage, and Stack.

padding

If you’d like to also adjust the padding around the button text, you can do that by adding this additional code in Custom CSS. The first number sets the top and bottom padding, and the second number sets the left and right padding.

.image-button a {
    padding: 1em 1.6em;
}

UPDATE MAY 2022: Use this code when Squarespace rolls out the backend code updates to your site:

.image-button.sqs-dynamic-text .sqs-button-element--primary {
    padding: 2em 2.6em !important;
}