How to Customize Captions in a Fullscreen Gallery Slideshow on Squarespace 7.1
Using a full-screen Gallery Slideshow on your homepage is a powerful way to make a bold first impression. But many Squarespace 7.1 users struggle to control the placement and style of captions, especially if they want precise control over how and where text appears on each image.
In this guide, we'll walk you through how to use custom CSS to style the figcaption element, the native caption container, and how to apply advanced layout rules to one specific section of your Squarespace site.
Use Case
You’re using:
A Gallery Section set to Slideshow (Fullscreen)
Captions enabled for each image
You want to:
Center the caption vertically
Align the text to the left
Customize font size and layout
Remove unnecessary space below the slideshow
The CSS Code You Need
Here’s the CSS snippet that accomplishes all of the above—targeting a specific section only, using its unique data-section-id.
section[data-section-id="12345678"] {
/* Remove space below the slideshow */
.gallery-fullscreen-slideshow {
margin-bottom: 0px !important;
}
/* Style the caption container */
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
top: 50%;
left: 0;
max-width: 90%;
}
/* Style all text inside the caption */
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
font-size: 30px;
text-align: center;
}
}
Explanation of Each Rule
| CSS Rule | Function |
|---|---|
section[data-section-id] |
Targets one specific Gallery Section (no global impact) |
.gallery-fullscreen-slideshow { margin-bottom: 0px; } |
Removes extra spacing below the slideshow |
figcaption.gallery-caption... { top: 50%; } |
Vertically centers the caption |
left: 0; text-align: left; |
Aligns the caption box to the left of the screen |
max-width: 90%; |
Ensures the caption doesn’t stretch too far |
* { font-size: 30px; text-align: center; } |
Increases font size for all caption text and centers the lines |
How to Use This Code
Step 1: Get Your Section ID
Right-click the gallery section on your homepage
Click Inspect
Look for section[data-section-id="xxxxxxxxxxxxxxxxxxxx"]
Replace the ID in the CSS with your actual one
Step 2: Paste the CSS
Go to Pages → Custom code → Custom CSS
Paste the entire block
Save and preview your changes
Bonus Tips
Add z-index: 10; if your caption overlaps poorly with background elements
Add a semi-transparent background for better readability:
background: rgba(0, 0, 0, 0.4);
padding: 10px;
border-radius: 4px;
For mobile optimization, add a media query:
@media screen and (max-width: 767px) {
figcaption.gallery-caption * {
font-size: 18px;
}
}
Final Thoughts
This little CSS tweak allows you pixel-perfect control of captions in a full-screen Gallery Slideshow … and it’s something Squarespace doesn’t let you do out of the box. Where you’re displaying portfolio pieces, brand photos, or homepage hero shots, well-placed captions can articulate your message with clarity and style.
Frequently Asked Questions
-
Yes. By targeting each section’s unique data-section-id in your CSS, you can apply different caption styles (font, alignment, size) to individual galleries without affecting others.
-
Right-click on the section → select Inspect → look for section[data-section-id="xxxxxxxx"] in the HTML. Copy that ID into your CSS snippet.
-
Not automatically. To optimize for smaller screens, use media queries in your CSS (e.g., reduce font size under 767px). This ensures captions stay readable without breaking the design.
-
Yes. Add a rule like:
background: rgba(0,0,0,0.4);
padding: 10px;
border-radius: 4px;
This creates a semi-transparent box behind text, making captions more visible on busy images.
-
No, captions remain as text-based content in Squarespace. Styling with CSS only changes appearance, not visibility to search engines — so your captions still support SEO and accessibility.
