erikaa

Add to Design > Custom CSS
/* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 0 !important; padding-right: 0 !important; } }  

Q1. Add to Design > Custom CSS
/* Masonry mobile */ @media screen and (max-width:767px) { figure.gallery-masonry-item { margin-bottom: 10px; } .gallery-masonry { margin-left: 10px !important; margin-right: 10px !important; } } Q2. Did you solve it?

Hi there
This is my first time using Squarespace and CSS, so please bare with me...
 i'm using a 2x2  Gallery for the desktop version, and want the images to be in just one column on mobile.
I've tried different CSS codes I found, but nothing seemed to happen to the gallery, any help would be much appreciated.
 

Site URL: https://beyondspace-showcase.squarespace.com/gallery-hovers/?password=1234&utm_source=squarespace_forum&utm_medium=topic&utm_campaign=promo
Hi my friends,
Today I gonna share a solution I used to customize the hover effect on Gallery Section (on 7.1 template). There are several steps to follow and finally you got a custom hover effect on caption enabled grid gallery section.
Access to this page for the step-by-step instruction to copy and paste the final code into your code injection, it will work site-wide, page specific or section specific
https://beyondspace-showcase.squarespace.com/gallery-hovers
Note: This solution is specifically for applying the caption animation, you want to implement your own stylesheet to modify the caption style such as responsive, font style and color...etc
video~1.mp4