How to Stack an Index Page Gallery in Pacific Mobile View

Want to stack your grid gallery on Pacific? You’re in the right place if you’re using a Gallery Collection in an index page (like the Pacific demo homepage). If not, you’ll want to check out my post on Stacking a Grid Gallery in Squarespace Mobile View.

The Pacific template for Squarespace includes an image gallery on the homepage, added as a Gallery Collection to the index page:

The default view is a slideshow, but you can change this in Site Styles to display as a grid with max columns of two, three, four, or five. While these grid galleries in Pacific can look amazing in desktop view, they look very cramped on mobile.

Change the Gallery Grid to Stack in Pacific Mobile View (for Index Page Collections)

To change the default Gallery Grid setting so the images stack on mobile, just add the following code to Custom CSS.

Note: this code works if you are setting your Grid Max Columns to TWO in Site Styles. If your Grid Max columns is THREE, just change the section “grid-max-columns-two” to “grid-max-columns-three.” Same for settings of FOUR and FIVE.

/* stack index gallery grid images on mobile */
@media only screen and (max-width: 640px)
{.collection-type-index.design-grid.grid-max-columns-two .index-gallery .slide-wrapper {
    -webkit-flex: 0 0 100% !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !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.

Save your code. Then refresh your page and you’ll see the images are now stacked. Much better!

Changing the Grid Gallery to Stack on just One Page

If you want to change the Grid Gallery mobile behavior for only one page, that works a bit differently. Instead of using the Custom CSS block, you’ll add <style> tags to the code and paste it into 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.

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

<!-- stack gallery grid on mobile -->
<style>
 /* stack index gallery grid images on mobile */
@media only screen and (max-width: 640px)
{.collection-type-index.design-grid.grid-max-columns-two .index-gallery .slide-wrapper {
    -webkit-flex: 0 0 100% !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
}
}
</style>

Note: This code works for Pacific family templates (Pacific, Bryler, Charlotte, Fulton, Horizon, and Naomi). I haven’t tested on other templates so YMMV.

---

A big thank you to Big Flavour Marketing who hired me to solve this problem and allowed me to post it here for others. Good karma headed your way, Big Flavour!