How to Show Portfolio Titles on Mobile in Squarespace (Grid Overlay CSS Fix)
If your Squarespace portfolio titles aren’t showing on mobile, you’re not alone.
In Squarespace 7.1, the Portfolio Grid Overlay layout relies on hover interactions. On desktop, this works beautifully — users hover with a mouse and the project title appears with a dark overlay.
But on mobile?
There is no hover.
That means your project titles — and often critical context — disappear entirely.
For contractors, architects, interior designers, photographers, and creative professionals, this is a serious usability issue. If visitors can’t immediately see what a project is, you’re creating friction.
Let’s fix that.
Watch the Video 👇
Why Portfolio Titles Don’t Show on Mobile in Squarespace
The issue comes down to how Squarespace handles interaction states.
Desktop: Hover triggers overlay + title
Mobile: No hover state exists
Result: Titles stay hidden
This is particularly noticeable when using:
Portfolio Page
Grid Overlay layout
Masonry-style layouts
Dark overlay with white title text
The platform doesn’t provide a built-in toggle to force overlays to display on mobile.
So we use custom CSS.
The Solution: Custom CSS for Mobile Portfolio Overlays
We’ll do three things:
Force titles to display on mobile
Add a black overlay background by default
Control opacity so images still shine through
This CSS specifically targets screens under 767px (standard mobile breakpoint).
Step 1: Open the Custom CSS Panel
In Squarespace 7.1:
Design → Custom CSS
Then paste the following:
/* Portfolio Gallery – Mobile Overlay Improvement */
@media screen and (max-width: 767px) {
.grid-item {
position: relative;
}
.grid-item::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45); /* Adjust darkness here */
z-index: 1;
}
.portfolio-text {
position: relative;
z-index: 2;
opacity: 1 !important;
color: #fff;
}
}Understanding Overlay Opacity (RGBA Explained)
The magic happens here:
rgba(0, 0, 0, 0.45)Let’s break it down:
0, 0, 0 = black
0.45 = opacity level
Lower number → lighter overlay
Higher number → darker overlay
Examples:
0.25 = very subtle
0.45 = balanced contrast
0.75 = strong/dark overlay
For most portfolio imagery, 0.45 is the sweet spot. It maintains strong text contrast without overpowering the photo.
Why This Matters for Conversion
This isn’t just a cosmetic tweak.
When portfolio titles don’t display:
Users have to tap blindly
They lose context
Your work feels less polished
Mobile UX suffers
For high-end service businesses — especially remodelers, general contractors, architects, and design firms — your portfolio is your sales tool.
Clear labeling builds confidence.
Better mobile readability increases engagement.
And better engagement increases inquiries.
Can You Adjust Font Size on Mobile in Squarespace?
Another common frustration:
Squarespace doesn’t allow mobile-specific font sizing for portfolio titles within the native editor.
That means if you want to:
Increase mobile title size
Adjust spacing
Fine-tune layout
Modify overlay behavior
You’ll need custom CSS.
The good news? Once you understand media queries, you can control nearly any mobile styling in Squarespace 7.1.
Works for Masonry Galleries Too
This approach can also be adapted for:
Masonry galleries
Stacked portfolio sections
Before-and-after project breakdowns
Long scrolling portfolio layouts
If you’re building a deep-dive project page with stacked sections, ensuring mobile clarity is essential.
Final Thoughts
Squarespace is a powerful platform — but some mobile behaviors require manual refinement.
If your portfolio relies on the Grid Overlay layout, I highly recommend testing it on an actual mobile device.
If titles aren’t visible, use the CSS above to:
✔ Improve usability
✔ Maintain strong image contrast
✔ Elevate perceived quality
✔ Create a smoother mobile experience
Need Professional Help With Your Squarespace Site?
If this update has you thinking about refreshing your site, improving your mobile experience, or tightening your brand storytelling, I’d love to help.
I’m Travis Vance, a Squarespace Circle Platinum Partner and Marketplace Expert who has built 125+ custom Squarespace sites across industries—from nonprofits and creatives to e-commerce and high-growth service businesses.
👉 See my portfolio: https://www.coyotemooncreative.com
👉 Book a strategy call: https://www.coyotemooncreative.com/contact
Let’s take your site from a yip to a howl. 🐺
Newsletter Signup
Sign up for my newsletter to receive detailed Squarespace design tutorials delivered to your inbox monthly. Get practical Squarespace design tips, as well as digital marketing strategies to grow your online business.
