How to Resize Slideshow Galleries on Mobile in Squarespace
Fullscreen slideshow galleries are stunning on a desktop, but on a phone, they can cause more harm than good. Rather than inviting users in, large galleries bury content well below the fold, slow navigation to a crawl, and render captions unreadable at times.
The gallery slideshow with full-bleed width in Squarespace 7.1 is a prime example, but the great thing is, it’s easy to solve with a small CSS modification. You've got a beautiful, large slideshow gallery, and you've just optimized it for mobile so that it won’t ruin the user experience on the small screen.
The Problem: Oversized Gallery on Mobile
On mobile devices, the gallery often takes up the entire screen when using the “Fullscreen Slideshow” layout in Squarespace. Now, while those are visually striking, they can:
Essential content is getting buried too deeply into the page
Users must scroll further than they would have to
Inconsistent mobile experience
Bad readability with captions on high images
The Solution: Limit Gallery Height on Mobile with Custom CSS
We can use a responsive media query to reduce the gallery’s height on mobile screens, creating a more compact and elegant layout without breaking the design.
Add This Code to Squarespace
Go to Pages → Custom code → Custom CSS, then paste the following:
@media screen and (max-width: 767px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
height: 35vh !important;
overflow: hidden;
position: relative;
}
.gallery-fullscreen-slideshow[data-width="full-bleed"] img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
What This Code Does
| Feature | Benefit |
|---|---|
@media screen and (max-width: 767px) |
Targets mobile screens only |
height: 35vh |
Shrinks gallery height to 35% of the screen |
overflow: hidden |
Prevents layout glitches or image bleed |
object-fit: cover |
Ensures images scale correctly without distortion |
You can adjust 35vh to a different value depending on how compact or prominent you want the gallery to appear. Try 25vh for a slimmer header-style gallery or 50vh for more emphasis.
Before vs. After
| Scenario | Result |
|---|---|
| Before | The gallery takes up the entire mobile screen |
| After | Compact, responsive gallery that blends seamlessly with surrounding content |
Final Thoughts
If you want your Squarespace 7.1 site to look and feel as professional and polished as a mobile site as it does on desktop, responsive design adjustments like this are necessary. Shortening the height of fullscreen slideshow galleries provides a better user experience—and yields more visitors scrolling down your content than bouncing.
Frequently Asked Questions
1) Why do slideshow galleries look oversized on mobile in Squarespace?
Squarespace's Fullscreen Slideshow layout fills the entire viewport by default. On mobile, this may fill the screen, force content well below the fold, and make text unreadable, especially if captions flow onto tall images.
2) How do I resize slideshow galleries in Squarespace without using code?
Rather than picking specific mobile gallery heights in Site Styles, Squarespace offers no direct mobile gallery height controls. You can modify padding and spacing, but for more granular control (say, reducing the gallery height to a percentage of the screen), you’ll want a little bit of CSS.
3) What CSS code should I use to resize slideshow galleries on mobile?
Add this under Pages → Custom code → Custom CSS:
@media screen and (max-width: 767px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
height: 35vh !important;
overflow: hidden;
}
.gallery-fullscreen-slideshow[data-width="full-bleed"] img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
This limits the height to 35% of the mobile screen while keeping images properly scaled.
4) Can I customize the height for different designs?
Yes. Change the 35vh value in the CSS:
25vh → Compact, header-style gallery.
35vh → Balanced design.
50vh → Larger, more visual impact.
This flexibility lets you match the gallery’s presence to your site’s design.
5) Will resizing galleries affect desktop or tablet layouts?
No. The CSS uses a media query (max-width: 767px), so the changes only apply to mobile devices. Desktop and tablet views remain unaffected.
