How to Change Lightbox Padding in Squarespace 7.1 (Complete Guide)
lightboxes in squarespace (image, gallery and video lightbox – lighboxes by squarespace) are default to be clean and minimal. But many website owners think the default padding is most tight or too wide, especially on large screen and mobile.
Sadly, there isn't an option built into Squarespace to adjust lightbox padding.
The good news?
With a little bit of clean, focused CSS, you can have all the control over padding INSIDE Squarespace lightboxes that you need—no plug-ins and no breaking responsiveness.
Why Adjust Lightbox Padding?
Customizing lightbox padding helps to:
Improve visual balance
Prevent images from feeling cramped
Create a more premium viewing experience
Improve readability for captions
Optimize spacing across devices
This is especially useful for photography sites, portfolios, galleries, and product previews.
Why Squarespace Doesn’t Offer Padding Controls
In Squarespace 7.1:
Lightboxes are system-generated
Layout values are hardcoded
There are no editor-level spacing controls
Padding is applied globally
Because of this, padding changes must be handled via CSS overrides.
What This Solution Will Do
By following this guide, your site will:
Adjust inner lightbox padding
Keep images responsive
Maintain proper centering
Work across all lightbox types
Remain update- and performance-safe
Step 1: Target the Squarespace Lightbox Container
Squarespace lightboxes use stable system classes such as:
.gallery-lightbox-control-btn
.gallery-lightbox-item-img
These are safe to target in Squarespace 7.1.
Step 2: Change Lightbox Padding Using CSS
Go to:
Website → Pages → Custom Code → Custom CSS
Add the following:
.gallery-lightbox-control-btn{
padding: 60px !important;
}
What This Does
Adds consistent spacing around lightbox content
Prevents edge-to-edge visuals
Improves overall composition
You can increase or decrease the 60px value as needed.
Step 3: Optimize Lightbox Padding for Mobile (Recommended)
To avoid excessive padding on smaller screens, add:
@media only screen and (max-width: 767px) {
.gallery-lightbox-control-btn {
padding: 24px !important;
}
}
This ensures:
Better use of screen space
Comfortable tap areas
Clean mobile presentation
Step 4: Target Gallery Lightboxes Only (Advanced)
If you want to affect gallery image lightboxes only, use:
.gallery-lightbox-item-img {
padding: 48px !important;
}
This avoids changing other lightbox types.
Common Mistakes to Avoid
Using fixed viewport widths instead of padding
Removing padding entirely (hurts UX)
Forgetting mobile overrides
Targeting .gallery-lightbox globally without scoping
Applying negative margins
Best Practices for Lightbox Spacing
Use generous padding on desktop
Reduce padding on mobile
Keep content centered
Test captions and navigation arrows
Avoid edge-to-edge lightbox layouts
Final Thoughts
Native jumbo lightbox padding in Squarespace 7.1 will get you nowhere, but fortunately a couple scopey CSS rules can have you on your way to full control over the space and style of things. This simple change can make a great visual enhancement — particularly for heavy image or portfolio sites.
FAQ: Lightbox Padding in Squarespace 7.1
-
No. Custom CSS is required.
-
Yes, unless scoped to specific types.
-
No. CSS-only solution.
-
Item description
-
Yes, using page-specific body classes.
