Masonry gallery to display one column on mobile only
The masonry gallery layout on Squarespace is a great way to showcase images in a visually appealing way. However, by default, the mobile view maintains the masonry effect, which can make images appear unevenly stacked. If you want a cleaner look where each image stacks in a single column on mobile, follow this tutorial to make the necessary CSS adjustments.
Step 1: Access Custom CSS in Squarespace
To modify the grid layout on mobile, you'll need to add some CSS.
Log in to your Squarespace website.
Go to Website Editor > Design.
Click on Custom CSS.
Step 2: Add Custom CSS to stack gallery images
To make the gallery stack images into a single column on mobile devices, insert the following CSS code into the Custom CSS panel:
/*gallery masonry 1-column on mobile */
@media screen and (max-width:640px) {
.gallery-grid--layout-grid .gallery-grid-wrapper{
grid-template-columns:1fr!important;
grid-column-gap: 1vw;
grid-row-gap: 4vw!important;
width: auto;
margin-left: auto;
margin-right: auto;
max-width: 75%;
}
}
@media screen and (max-width:640px) {
.gallery-grid--layout-grid .gallery-grid-wrapper{
grid-template-columns: 1fr!important;
grid-column-gap: 1vw;
grid-row-gap: 3vw!important;
width: auto;
}
}
Explanation:
@media screen and (max-width:640px): Targets mobile screens with a width of 640px or less..gallery-grid--layout-grid .gallery-grid-wrapper { grid-template-columns: 1fr!important; }: Ensures each gallery item takes up the full width.grid-row-gap: 4vw!important;andgrid-column-gap: 1vw;: Adjusts spacing between images.margin-left: auto; margin-right: auto; max-width: 75%;: Centers the gallery and limits its width for better readability.
