How to Keep the Gallery Slideshow Block Full Width on Mobile in Squarespace
Squarespace's Gallery Slideshow blocks look fantastic for images, but they don't always scale or maintain a full-width feel on mobile like they do on desktop. In order to keep the gallery slideshow full-width on mobile, you will need to add some custom CSS to the corresponding section.
In this post, we’ll show you step-by-step how to maintain the full-width of your Gallery Slideshow block on mobile while keeping the image viewable and edge-to-edge right up to its maximum available width.
Why This Matters
If you find that your gallery block isn’t going full-width on mobile:
The visual storytelling feels cramped.
Images may scale down awkwardly.
It would destroy the parity of desktop and mobile design.
Solving this helps improve:
Mobile experience
Image impact
Brand perception
Step-by-Step: How to Force Gallery Slideshow to Full Width
Step 1: Get the Section ID
Each section in Squarespace has a unique data-section-id. To find it:
Right-click the section in Chrome.
Click Inspect.
Look for something like:
<section data-section-id="6857cb4c3b423e68ab286216">
Step 2: Add the CSS
Go to **Design → Custom CSS** and paste the following:
@media screen and (max-width: 767px) {
section[data-section-id="6857cb4c3b423e68ab286216"] .gallery-fullscreen-slideshow {
margin-left: calc(-50vw + 50%) !important;
height: auto !important;
padding: 0 !important;
}
section[data-section-id="6857cb4c3b423e68ab286216"] .gallery-fullscreen-slideshow img {
object-fit: cover !important;
}
}
Optional: Add Fixed Height (If Desired)
If you want the gallery to maintain a fixed height (like 40% of the viewport), use:
.gallery-fullscreen-slideshow {
height: 40vh !important;
}
.gallery-fullscreen-slideshow img {
object-fit: cover !important;
}
What This CSS Does
100vw: Forces the slideshow to take up the full screen width.
margin-left: calc(-50vw + 50%): Recenters the block, bypassing Squarespace padding.
object-fit: cover: Ensures your images stay clean and responsive without distortion.
Media query: Targets only mobile screens (≤767px).
Final Result
Once added, your gallery slideshow block will:
Span edge-to-edge on mobile devices.
Maintain image integrity and clean layout.
Look as impactful on mobile as on desktop.
Final Thoughts
Squarespace is mobile-ready right out of the gate, but some more advanced customization, such as a full-width mobile slideshow, will take some manual CSS. With a bit of tweaking, you can give your galleries a real shot in the arm for mobile, ensuring every visitor gets to see your images at their very best.
Frequently Asked Questions
-
Squarespace will automatically pad and scale as necessary on mobile. This makes slideshows look centered, or narrower than they should be, rather than stretching from edge to edge as they do on a desktop.
-
Yes. You can do this by targeting the unique section ID of the gallery section, rather than all blocks. This way, other slideshows on your site are not affected.
-
No. Keeping object-fit: cover (or its visual equivalent) does the scales in the same manner. This maintains the image aspect ratio and fills the width of the screen, though.
-
You can fix it with height (for example, 40% of the viewport). This helps give your slideshow an aspect that will be consistent in size, but may crop the images a little depending on their proportions.
-
No. The change is within a mobile-only rule (below 767px). On desktop and tablet, the link above zones remain the same; it's just mobile that has been stretched to span the full width.
