How to Stack a Grid Gallery in Squarespace Mobile View

How to Stack a Grid Gallery in Squarespace Mobile View

The Grid Gallery Block is one of four Squarespace Gallery Block options. It adds a gallery of images and videos to a page or blog post in a symmetrical grid. On mobile, the gallery displays as a grid two columns wide. You can see an example of this here:

default gallery grid on Squarespace mobile

But what if you want the images to stack, changing the default grid gallery settings on mobile from being 2 items per line to 1 item per line? (Shoutout to Kelsey in the Squarespace Community Group for asking this question!)

Stacked Gallery Grid in Squarespace Mobile

Quick note: If you are looking for a solution for stacking a Grid Gallery on the Pacific Template, you may want to check out my other post specifically for Index page Gallery collections in Pacific.

 

Changing the Gallery Grid to Stack on Mobile by Default

To change the default Gallery Grid setting for your website so that the images stack on mobile, just add the following code to Custom CSS:

Custom CSS Menu in Squarespace
/* stack gallery grid on mobile */

 @media only screen and (max-width: 640px)
  {.sqs-gallery-design-grid-slide {
      width: 100% !important;
      clear: none !important;
  }
  }

If you also want the stacking behavior when you use your phone in landscape mode, or on larger mobile devices, simply increase the max-width above.

Changing the Gallery Grid to Stack on only One Page

If you want to change the Gallery Grid mobile behavior for only one page, that works a bit differently. Instead of using the Custom CSS block, you’ll add slightly different code to the Page Header Code Injection.

In the Pages panel, hover over a page (or index) title, then click the settings icon that appears on the right.

Page settings in Squarespace

From Page Settings, navigate to the Advanced tab and paste the code below into Page Header Code Injection then click save.

Squarespace page header code injection
<!-- stack gallery grid on mobile -->
 <style>
 @media only screen and (max-width: 640px)
  {.sqs-gallery-design-grid-slide {
      width: 100% !important;
      clear: none !important;
  }
  }
</style>

Note: This code works for Brine family templates (Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West). I haven’t tested on other templates so YMMV.


If this post was helpful, I’d love to know. Drop a note in the Comments ↓ with a link to your site and how you used the CSS.