How to Show Different Galleries on Desktop vs. Mobile in Squarespace 7.1
Why Show Different Galleries on Desktop vs. Mobile?
Squarespace’s built-in gallery blocks are both beautiful and functional; however, there are times when a one-size gallery layout doesn’t fit all screen sizes. Perhaps your desktop visitors would love a full-on slideshow, while your mobile users might appreciate a little carousel. That’s where device-specific galleries come in.
With a little bit of custom CSS, you can show one gallery on desktop and another one on mobile without having an impact on your page layout.
Benefits of Device-Specific Galleries
Customize the design for your screen size
Optimize graphics for a quick mobile experience
Optimize content more for mobile vs. desktop users
Keep your clothes way cleaner and more professional-looking
Step-by-Step Instructions
Step 1: Access Custom CSS
Go to Design → Custom CSS
Scroll to the editor panel, where you can paste custom code
Step 2: Add the CSS Code
//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:
Install the Squarespace ID Finder Chrome Extension
Preview your website
Hover over each gallery section the section ID will appear
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
Preview your site in desktop view — you should see the desktop gallery
Use mobile view in browser DevTools or your phone — you should now only see the mobile gallery
Adjust image size/layout within each gallery to best suit the screen type
Final Thoughts
By using a simple media query and section IDs, you can elevate your gallery experience for every visitor, without needing a plugin or external tool. It’s a smart way to take control of design and functionality across devices.
FAQ
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:
Go to your live site preview
Hover over the section to target
Copy the data-section-id from the overlay
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.
