Portfolio Grid Titles in Squarespace 7.1 (How to Style, Resize & Control Them)
Portfolio grids are a staple feature in Squarespace 7.1 — you often see these on Squarespace sites for projects, case studies, photography or design work. But many users are challenged by grid titles—too big, in the wrong spot, not responsive, or just plain ugly.
This guide illustrates how you can make portfolio grid titles displaying the way it should be, what natively you can control and how to do this right in clean CSS.
How Portfolio Grid Titles Work in Squarespace 7.1
In Squarespace 7.1:
Portfolio grids are system-generated
Titles pull automatically from the project title
Title position and visibility depend on the layout style
Styling options are limited in Site Styles
This means deeper customization often requires Custom CSS.
Common Issues With Portfolio Grid Titles
You may notice:
Titles are too large or overpowering
Titles break awkwardly on mobile
Hover titles lack contrast
Inconsistent spacing between items
Titles don’t align with brand typography
These are common and solvable issues.
Native Options (Check This First)
Before adding code:
Go to Design → Site Styles
Open Fonts
Adjust:
Portfolio Title font
Font weight
Letter spacing
Check grid vs hover layouts
If this doesn’t give enough control, use CSS.
Resize Portfolio Grid Titles (Recommended Fix)
Step 1: Open Custom CSS
Go to Website → Pages → Custom Code → Custom CSS and add the following:
Step 2: Add This CSS
.portfolio-grid-basic .portfolio-title,
.portfolio-hover-title {
font-size: 18px !important;
line-height: 1.3 !important;
}
This:
Reduces oversized titles
Improves readability
Keeps titles visually balanced
Adjust Font Weight & Spacing
.portfolio-title {
font-weight: 500;
letter-spacing: 0.5px;
}
Ideal for clean, modern portfolio layouts.
Mobile-Specific Title Fix
Portfolio titles often look too large on mobile. Fix this with a media query:
@media only screen and (max-width: 767px) {
.portfolio-title {
font-size: 16px !important;
}
}
This prevents:
Text overflow
Broken grid alignment
Visual clutter on small screens
Change Title Color for Better Contrast
.portfolio-title {
color: #111111 !important;
}
.portfolio-hover-title {
color: #ffffff !important;
}
Target a Specific Portfolio Page Only (Best Practice)
If you want changes on one portfolio page only:
Inspect the page
Copy the data-section-id
Scope your CSS
section[data-section-id="YOUR-SECTION-ID"] .portfolio-title {
font-size: 20px !important;
}
This avoids global side effects.
Hide Portfolio Titles Completely (Optional)
If you prefer a minimal grid:
.portfolio-title {
display: none !important;
}
Useful for:
Image-only portfolios
Editorial-style layouts
Common Mistakes to Avoid
Over-scaling titles
Ignoring mobile layout
Using vw units without limits
Styling globally without scoping
Poor contrast on hover titles
Best Practices for Portfolio Grid Titles
Keep titles short and readable
Maintain consistent font sizing
Use subtle hover effects
Design mobile-first
Let images remain the focus
Final Thoughts
Squarespace 7.1 portfolio grid titles are deliberately simple BUT with some targeted CSS you can control their size, spacing and look completely. The idea is to make your visual work clearer, without overwhelming it.
Well-edited typography makes for better portfolios.
FAQ: Portfolio Grid Titles in Squarespace 7.1
-
Yes. Portfolio grids use their own CSS classes.
-
Yes, using media queries.
-
Yes, with hover-specific selectors.
-
Yes. Typography changes are platform-safe.
