How to Display Mobile Squarespace Galleries as a Single Column with CSS

If you’re reading this, the odds are good that you’ve just squinted at your Squarespace site on your phone and muttered a few choice words under your breath. Gallery images stubbornly jammed side by side, leaving your carefully arranged photos in a sort of digital conga line. At least, that’s how it felt the last time it happened to us.

In this guide, I’ll walk you through the exact steps to fix mobile galleries on Squarespace so your images display in a clean, one-image-per-row column. No arcane script. No unnecessary bloat. This guide gives you the knowledge you need, along with some hard-learned experience, and probably less swearing than I managed the first time around.

Why This Matters

You’ve spent hours getting your Squarespace gallery just so. It looks great on your desktop. But then you check your phone, and something’s very off. By default, Squarespace crams those images into two columns, even on mobile screens. That means one image lines up with another, and if you’ve picked a lovely odd number like five or seven shots, you end up with a lopsided orphan at the bottom. The rhythm is lost. Your site looks, frankly, unfinished.

This goes beyond a simple styling gripe. A clumsy gallery on mobile communicates a lack of attention to detail. Mobile visitors, who now make up the growing majority on most sites, see a gallery that’s busy, chaotic, and much harder to use with a thumb. For creative businesses, photographers, designers, or anyone who needs to showcase a portfolio, this can genuinely cost you work. First impressions matter. And nobody wants a potential client to bounce away from your site because they can’t clearly see your best work.

I’ve seen this cost teams hours of extra tinkering, and sometimes the hope that Squarespace will just “fix it in the next update.” Spoiler alert: Squarespace has not done so. So let's take care of it ourselves.

Common Pitfalls

If you’re here, you’ve likely tried some “quick” CSS you found on a forum or chat group. Maybe you even tried this little number:

.gallery-grid-wrapper {
  grid-template-columns: repeat(1, 1fr) !important;
}

Looks sensible, right? Single column, job done! Except it doesn’t work. This approach fails to actually change anything, and when you peek under the hood, the browser console cheerfully warns you about an “invalid property value.” As you scroll through the Squarespace CSS editor, you’ll spot that pesky bit of whitespace between “1 fr” in the property value.

Here's what's happening: Squarespace’s built-in CSS editor has a nasty habit of mangling certain syntax, especially inside functions like repeat(…). The editor introduces unwanted spaces, which trips up the browser. As a result, your gallery stays stubbornly in two columns, and your frustration level creeps upward.

A related pitfall: pasting in “fixes” that target the wrong class or break layouts elsewhere on the site. Because not all Squarespace templates behave in exactly the same way, it’s easy to accidentally nuke your desktop view while chasing perfection on mobile.

If you’ve run through every combination in the book and still feel like you’re missing something obvious, you’re not alone. I’ve been there. Squarespace is the issue in this scenario, not you.

Step-by-Step Fix

Let’s get hands-on. You’ll need access to your site’s Custom CSS panel (no developer plan required), and about five minutes of patience. Slightly more if your coffee’s still brewing.

1. Open the Custom CSS Panel

The first step is simple. From your Squarespace admin dashboard, head over to Design > Custom CSS. This section is your command centre for tinkering with styles outside of what the page builder offers.

2. Locate the Correct Gallery Wrapper Class

Out of the box, most Squarespace gallery sections use the .gallery-grid-wrapper class. But depending on your template or the exact section style, it's smart to double-check. If you’re not completely sure, right-click one of your gallery images on the live page, select “Inspect” (or “Inspect Element”), and look for the parent div that wraps the tiles. In most cases, you’ll see .gallery-grid-wrapper in the class list.

3. Add the Correct CSS for Single Columns

Now, for the main event. Paste the following snippet into your Custom CSS panel:

@media (max-width: 640px) {
  .gallery-grid-wrapper {
    grid-template-columns: repeat(auto-fill, 100%) !important;
  }
}

This code tells your mobile breakpoint (in this case, up to 640px wide) to stack every image on its own row, giving each one the full width of the screen. Using repeat(auto-fill, 100%) keeps Squarespace’s parser from fiddling with the value. The !important declaration ensures your style overrides Squarespace's defaults.

4. Test On Multiple Devices

Once your code’s in, preview your site using the mobile preview mode in the Squarespace editor. Continue by grabbing your actual phone and, if you’re on a desktop, resize your browser window to see the transition happen in real time. If you spot odd behaviour such as images not filling the row or columns sticking around, check that your custom CSS hasn’t been overridden elsewhere.

5. Troubleshoot Common Issues

If nothing changes, check the following:

• The class name: Is your gallery block definitely .gallery-grid-wrapper, or does yours use a variation?
• Placement: Did you put your CSS in the global Custom CSS panel (best), or at the section/page level (more prone to errors)?
• CSS conflicts: If you have other plugins or custom code that targets galleries, those might be interfering with your new rules.

6. Polish and Check Visual Balance

A one-column layout is now in place, but sometimes image proportions or paddings make things look cramped or awkward. Adjust the CSS if necessary:

@media (max-width: 640px) {
  .gallery-grid-wrapper {
    grid-template-columns: repeat(auto-fill, 100%) !important;
    gap: 15px;
  }
  .gallery-grid-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }
}

Tweaking the gap property adds breathing room between images, and forcing image width ensures nothing spills over the sides.

What Most People Miss

Fixing galleries requires more than dropping in the CSS snippet. The real difference between a passable mobile gallery and an outstanding one is often shaped by a few subtle habits:

• Test on Real Devices: Emulators are helpful, but always check your site with an actual smartphone or tablet. Each browser can handle custom CSS a little differently, and some (looking at you, Safari) can be especially picky.
• Pay Attention to Aspect Ratios: Wide or tall images can sometimes overflow or introduce scrollbars if they’re sized inconsistently. Where possible, use a consistent aspect ratio in your gallery images before you upload them.
• Check for Template-Specific Quirks: Some Squarespace templates have extra layers of wrappers or additional classes. If your CSS doesn’t stick, climb up the DOM and try a more specific selector, like .section-gallery .gallery-grid-wrapper or similar.

When you develop the patience to inspect your layout carefully and test tweaks, you move from settling for "good enough" to consistently achieving a clean, professional result.

The Bigger Picture

Sorting out single-column galleries might feel like a small detail, but small improvements like this set a polished site apart from an amateur one. Mobile traffic now makes up the majority of web visits. When clients or customers tap through your images and everything lines up correctly, it creates a lasting impression.

Beyond making your site look better, solving this problem now saves you time on future projects. You’ll develop reusable patterns and the skill to fine-tune every corner of your site. Consistency builds trust, and a reputation for getting details right leads to better clients and a smoother workload.

Once you hone your eye for “good on desktop, flawless on mobile,” your design mindset will shift. Soon enough, others will look to you for advice. Even better, you’ll spend less time troubleshooting and more time doing the creative work that matters most.

Wrap-Up

Getting Squarespace galleries to display well on mobile takes a bit of detective work and CSS finesse. The key is knowing where to look—a precise class here, the right code syntax there, a steady hand on the preview button—and your site will shift from “almost” to “impressive.”

If you followed the steps above, you should have a crisp, user-friendly gallery on any mobile device. No more squinting, side-scrolling, or unsightly image gaps. Next time, with your refined workflow, you’ll spend just minutes making new projects mobile-ready.

Want more helpful systems like this? Join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.

Jargon Buster

• CSS (Cascading Style Sheets): The language you use to style and lay out web pages.
• DOM (Document Object Model): The tree-like structure your website turns into in the browser, which you can poke at in the inspector tools.
• Breakpoint: A set screen width at which your site’s layout changes (like switching to one column on mobile).
• Selector: The bit in your CSS that “selects” which elements you want to style (e.g. .gallery-grid-wrapper).
• Grid-template-columns: A CSS rule defining how many columns a grid has, and how wide they are.

FAQs & Troubleshooting

Q: My gallery still shows two columns on mobile. Why?
A: Double-check that your selector matches the actual gallery class on your site (right-click > Inspect). If you’re using a gallery block or a template with different markup, you may need to adjust the class name.

Q: The images look stretched or squished. Can I fix this?
A: Make sure each image is sized at 100% width and has height: auto in your CSS. Consistent aspect ratios in your uploads will help too.

Q: Will this CSS break anything on desktop?
A: As long as your code is wrapped inside a @media (max-width: 640px) block, your desktop styles will remain unchanged.

Q: My CSS doesn’t seem to save or apply. What should I do?
A: Ensure you’re pasting the CSS into the global Custom CSS panel, not just in the page or section settings. If you have caching plugins enabled, try clearing them.

Q: Can I use this fix on older Squarespace 7.0 templates?
A: Yes, you can. Just double-check your gallery’s parent class, as Squarepace often changes markup across versions.

Authored by Elwyn Davies, Pixelhaze Academy

If you’ve encountered a gallery quirk that refuses to work correctly, or you’ve run into another peculiar Squarespace challenge, share it in the Academy forum. Others may have solved it already, and your question could inspire the next fix we feature.

Happy site-tinkering.