How to Show Different Galleries on Desktop vs. Mobile in Squarespace 7.1

Why Show Different Galleries on Desktop vs. Mobile?

Squarespace’s native gallery blocks are gorgeous and functional, but in some cases, one gallery layout might not be the perfect fit for all screen sizes. Maybe your desktop users would be great with a full-on slideshow, but your mobile users would like a smaller carousel. Here’s where device-specific galleries can help.

With some custom CSS to make them look the same, you can show a gallery on a desktop and a different gallery on a mobile without changing your page structure.

Benefits of Device-Specific Galleries

• Design for your screen dimensions

• Optimized graphics for an exciting mobile experience

• Prioritize content less for desktop users, more for mobile users

• Keeps your clothes much cleaner and more professional-looking

Step-by-Step Instructions

Step 1: Access Custom CSS

1. Go to Pages → Custom code → Custom CSS

2. Scroll to the editor panel, where you can paste custom code

Step 2: Add the CSS Code

Copy

Copied!

//Hide on desktop
@media screen and (min-width: 766px) {
    section[data-section-id="683d6d22848f076a35454545"] {
        display: none !important
    }
}
//Hide on mobile
@media screen and (max-width: 767px) {
    section[data-section-id="683d6c6b0f378326344787878"] {
        display: none !important;
    }
}
  

Replace the section IDs above with yours for proper functionality.

Step 3: Get Section IDs

You’ll need to find the section IDs for both galleries:

1. Install the Squarespace ID Finder Chrome Extension

2. Preview your website

3. Hover over each gallery section the section ID will appear

4. Copy and paste the correct ID into your CSS code above

Step 4: Save & Test

• Save your CSS changes

• Open your site on desktop and mobile (or use browser DevTools to simulate)

• Confirm:

• The desktop gallery is visible on the desktop

• The mobile gallery is visible on phones and tablets

Test Your Gallery

1. Preview your site in desktop view — you should see the desktop gallery

2. Use mobile view in browser DevTools or your phone — you should now only see the mobile gallery

3. Adjust image size/layout within each gallery to best suit the screen type

Final Thoughts

All devices aren't created equal, so why should your galleries be? By simply hiding one gallery on desktop and another on mobile, you ensure that your visitors have the best experience, regardless of how they access your site.

This lightweight CSS snippet ensures your design remains pristine, your galleries remain flexible, and your site looks better, regardless of the screen size your users are using. It’s a small change that has a major effect: You can customize visuals to the way your audience looks at sites, whether they are on a phone or a desktop.

---

Frequently Asked Questions

• 1. Can I use this technique to show different content types, not just galleries?

  Yes! You can use this same method for any section on your Squarespace site, from text blocks to video sections to banners to buttons or forms. Just get the right section ID and apply the same logic media query too.

• 2. Will both galleries load in the background, even if hidden?

  Yes. The whole two sections are loaded in the DOM, but one of them is hidden by CSS according to the width of the viewport. This is so that the content still loads, however, only one gallery is visible to the person depending on their device.

• 3. How do I make sure the section ID is correct?

  Use the Squarespace ID Finder Chrome extension. Once installed:

  1. Go to your live site preview

  2. Hover over the section to target

  3. Copy the data-section-id from the overlay

  4. Replace it with your customized CSS code

• 4. Can I use different designs for the desktop and mobile galleries?

  Absolutely. It’s because they are in different sections that you can apply different layouts, gallery type (carousel vs. slideshow), padding, background, or heading, all individually.

• 5. Does it need a Developer Mode or a plugin?

  No. This also works in Squarespace 7.1 using no Developer mode or plugins. All you have to have is access to the Custom CSS section.

• 6. What if I append this to a template that already has responsiveness?

  It still works. Squarespace templates are already designed to be responsive on multiple screen sizes, but this way you have very fine control over what content gets displayed, which works great with custom galleries.

• 7. Can I preview changes before publishing?

  Yes! Leverage browser DevTools (such as Chrome mobile emulator) to preview mobile views to make certain everything is switching accordingly before pushing your changes live. description