Single Column Gallery Sections On Mobile

Abi Bacon

Squarespace Developer based in Southampton, UK

By default Squarespace Gallery Sections are two columns wide on mobile devices, but quite often we’d like them to be single column to really showcase our images. Luckily Squarespace uses CSS Grid for these Gallery Sections so it is super easy to change the column count to our liking.

The Solution

Don't worry, this is simpler than explaining to your cat why they can't have a second dinner. With just a few lines of code, we can transform those squabbling columns into a harmonious single-file line.

This code is based on using the Grid: Simple layout.

@media screen and (max-width: 768px) {
  .page-section.gallery-section .gallery-grid-wrapper {
    grid-template-columns: 1fr !important;
    grid-row-gap: 20px !important;
  }
}

How The Code Works

Let's break down this code like we're explaining a magic trick to a room full of skeptical penguins who are surprisingly interested in web development:

1. We start with .page-section.gallery-section - that's us saying "Hey, gallery section, yes you!"

2. Then we target the .gallery-grid-wrapper - the actual grid container that's being a bit too ambitious with its columns

3. grid-template-columns: 1fr tells it to stick to one column, like a well-behaved queue at a British bus stop

4. that !important? It's like giving our CSS a megaphone to shout over Squarespace's inline styles. We need this because Squarespace sneakily sets its grid columns using inline styles, and sometimes you need to be louder than the default styling

5. grid-row-gap: 20px adds some breathing room between images, because nobody likes their art getting too cozy with each other

---

---

More Posts Like This