How to fix squarespace masonry gallery on mobile (Single Column Layout)

May 16

Masonry galleries look great on desktop. On mobile, not always. Squarespace uses JavaScript to calculate and position each image, and on smaller screens that calculation doesn't always play nice — you end up with images that feel too small side by side, or a layout that just looks unintentional.

The cleanest solution is to ditch the multi-column layout on mobile entirely and stack everything into a single full-width column. It's easier to scroll, images get the space they deserve, and the gallery actually feels curated rather than compressed.

The code

/* Masonry Gallery Single Column on Mobile - sqspguru.com */
@media (max-width: 767px) {
  @gallery-spacing: 0; // spacing around the gallery
  @gallery-items-spacing: 0px; // spacing between items

  .gallery-masonry {
    padding: @gallery-spacing !important;
    .gallery-masonry-wrapper {
      grid-template-columns: 1fr !important;
      display: grid !important;
      height: auto !important;
      grid-gap: @gallery-items-spacing;
      .gallery-masonry-item {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        transform: unset !important;
        .gallery-masonry-item-wrapper {
          position: relative;
          display: block !important;
          width: 100% !important;
          height: 100% !important;
          img {
            height: auto !important;
            width: 100% !important;
          }
        }
      }
    }
  }
}

Spacing variables explained

Two variables at the top of the snippet control all the spacing — edit these instead of touching the rest of the code:

@gallery-spacing - Padding around the entire gallery block on mobile
@gallery-items-spacing - Gap between each image in the column

How to add

Step 1

Go to Custom Code → Custom CSS in your Squarespace panel

Step 2

Paste the code at the bottom of any existing CSS

Step 3

Adjust the two variables at the top to your preferred spacing

Step 4

Click Save and preview on a mobile device

Final Result

Once saved, your masonry gallery will display in a clean single column on mobile — full-width images, stacked top to bottom, with whatever spacing you've set between them. Desktop layout stays completely untouched.