[Share] Gallery Masonry One colum on Mobile

To make Gallery Masonry to one column on Mobile, you can use these CSS code. If you can't make it work, you can send site url, I will check it again.

#1. Masonry on All Pages

@media screen and (max-width:767px) {
.gallery-masonry-item-wrapper {
height: auto !important;
margin-bottom: 30px !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: 10 !important;
padding-right: 10 !important;
}
.gallery-masonry-wrapper.gallery-masonry-list--ready {
height: auto !important;
}}

#2. Masonry on One Page

First, you need to find the Page ID. Use below tool.

In my example, we will have: #collection-667f8bab720ee26389417857

Next, use this CSS code to Custom CSS box.

@media screen and (max-width:767px) {
#collection-667f8bab720ee26389417857 {
.gallery-masonry-item-wrapper {
height: auto !important;
margin-bottom: 30px !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: 10 !important;
padding-right: 10 !important;
}
.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}}}

#3. Specific Gallery Masonry

First, you need to find the Masonry Section ID. Use #2 tool.

In my example, we have: section[data-section-id="669f7200f32d0e0ff44bb2b1"]

Next, use this CSS code

@media screen and (max-width:767px) {
section[data-section-id="669f7200f32d0e0ff44bb2b1"] {
.gallery-masonry-item-wrapper {
height: auto !important;
margin-bottom: 30px !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: 10 !important;
padding-right: 10 !important;
}
.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}}}