DIY | Library | Gallery Block
Customise Squarespace Gallery Blocks with CSS
In this post, we’ll be looking at how to style the Squarespace CSS gallery block using custom code snippets. Gallery blocks are fantastic for showcasing images, but they often need a little CSS to align with your brand’s design—whether that’s adjusting image spacing, borders, hover effects, or layout styling. You’ll find accordion blocks below filled with helpful code examples.
I’ll be adding new snippets as I go, so feel free to check back or get in touch via sarah@foubography.com if you have something specific in mind.
-
/* Lightbox Caption Style */
.yui3-lightbox2 .sqs-lightbox-meta * {
font-family: broadacre !important;
}
-
@media screen and (max-width:640px) {
div#block-id {
margin-bottom: 0 !important;
}
div#block-id .slide {
width: 20% !important;
}
div#block-id img {
width: 100% !important;
height: auto !important;
vertical-align: middle;
display: block;
}
}
Related posts
Looking to customise your Squarespace site with code? This post is part of the DIY | LIBRARY —a growing collection of practical code snippets designed for Squarespace users who want to take control of their site’s design and functionality. Whether you’re tweaking your navigation, adjusting your mobile menu, or styling buttons, these copy-paste solutions are clean, reliable, and built with SEO and usability in mind. Bookmark this space for easy access to Squarespace custom code that works.
