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

Want to show one gallery section on desktop and a completely different one on mobile? Squarespace doesn’t offer this option out of the box, but with a little bit of custom CSS, you can create a tailored visual experience that adapts perfectly to your viewers' devices.

Why Customize Gallery Sections for Different Devices?

• By showcasing different galleries based on the device, you can:

• Highlight content that best fits each screen size.

• Optimize image layout and quality for mobile users.

• Make sure your site always looks polished and professional, no matter the device.

Table of Contents

→ Video tutorial
→ Step-by-step
→ Full code

Watch the Video

Check out the YouTube video below 👇

Step 1: Access the Custom CSS Panel

First, head over to the back end of your site. Navigate to Pages > Website Tools > Custom CSS. This is where we'll add the CSS code needed to control which galleries show up on desktop vs. mobile.

Step 2: Add Your CSS Code

Paste the CSS code snippet into the panel. The code will help us hide the desktop gallery when the site is viewed on a mobile device and vice versa.

@media screen and (max-width: 640px) {
    section[data-section-id="66f1c16c8793bb3f1977937e"] {
        display: none!important;
    }//desktop gallery
}//hide on mobile
@media screen and (min-width: 641px) {
    section[data-section-id="66f1c16c8793bb3f19779381"] {
        display: none!important
    }//mobile gallery
}//hide on desktop

Step 3: Find Your Section IDs

Add the Squarespace ID Finder extension to your browser.

Next, we need to identify the section IDs for both the desktop and mobile galleries.

Open your block ID finder tool and locate the section ID for the desktop gallery.

Copy that ID and paste it into the CSS code under the section meant to hide the desktop gallery on mobile.

Repeat the same for your mobile gallery section ID.

Step 4: Test the Changes

Once you’ve added and customized the CSS, save your work. Then, switch to the mobile view in your Squarespace editor to make sure everything looks as expected. The desktop gallery should be hidden, and only the mobile-specific gallery should appear.

Conclusion

And that's it! With a few quick adjustments, you now have a site that displays tailored gallery sections based on whether your viewers are on mobile or desktop. It’s a simple way to ensure a cohesive and dynamic visual experience for all users.

If you found this tutorial helpful, or if you’re interested in more ways to enhance your Squarespace site, feel free to reach out. I’m here to help you create a website that’s as dynamic and unique as your brand!

---

Full Code

@media screen and (max-width: 640px) {
    section[data-section-id="66f1c16c8793bb3f1977937e"] {
        display: none!important;
    }//desktop gallery
}//hide on mobile
@media screen and (min-width: 641px) {
    section[data-section-id="66f1c16c8793bb3f19779381"] {
        display: none!important
    }//mobile gallery
}//hide on desktop

Hey hey, Marya here 👋🏼

I’m the creative force behind Yangu Web Studio and a top-rated web designer on Squarespace's exclusive Marketplace for experts.

I adapt my skills to diverse industries and businesses globally, of all sizes, specializing in crafting digital solutions tailored to your unique goals. If you want to discuss a potential project, you can drop me a line at marya@yanguweb.studio or vibe with me here. Alternatively, you can schedule a free 15-minute consultation call here.

Back to blog