1 Image Per Row On Mobile - Grid Gallery (Masonry)
Follow these steps to add this free plugin to your Squarespace website.
1. Plugin Info
Display one image per row on mobile when using a Grid Gallery (Masonry) page section.
Works with Squarespace 7.1
Uses Custom CSS
Applies to Masonry Layout
2. Add this code to Custom CSS
// 1 Image Per Row On Mobile - 7.1 Grid Gallery Masonry Page Section - Ghost //
@masonry-image-spacing: 25px;
/* --- Do Not Edit Below ---- */
@media only screen and (max-width: 800px) { .gallery-masonry .gallery-masonry-item img, .gallery-masonry-wrapper.gallery-masonry-list--ready, .gallery-masonry-item-wrapper { width: 100% !important; height: auto !important; }} @media only screen and (max-width: 800px) { figure.gallery-masonry-item { transform: unset !important; width: 100% !important; padding-bottom: @masonry-image-spacing !important; position: relative !important;}}
// 1 Image Per Row On Mobile - 7.1 Grid Gallery Masonry Page Section - Ghost //3. Customizable Options
Image Spacing
4. Plugin Notes
Must use gallery page section with Masonry Layout.
Not compatible with the Grid Gallery Block.
