Change number of columns on image gallery on mobile only

Site URL: https://www.amypeacock.com/

I have my gallery of images set at 2 columns, which I like on desktop, but I'd like it so it's only one column on mobile. How can I achieve this?

6 hours ago, tuanphan said:

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;
}
}

 

Thank you so much!! That works great

and what, when i need offset (spacing) between each tile?? where can I define that?

On 11/19/2022 at 8:05 AM, bamab said:

and what, when i need offset (spacing) between each tile?? where can I define that?

To add space between items, edit this line

figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}

to

figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
	margin-bottom: 20px;
}

On 6/9/2021 at 7:50 PM, tuanphan said:

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;
}
}

 

is it possible to specify one, or multiple, pages to apply this code to? That way it doesn't affect every page

On 6/21/2023 at 3:03 AM, gantons said:

is it possible to specify one, or multiple, pages to apply this code to? That way it doesn't affect every page

This code will affect all Masonry Galleries

If you need to affect it on specific gallery, just share link to page where you use it, we can adjust the code easier

On 6/22/2023 at 1:41 AM, tuanphan said:

This code will affect all Masonry Galleries

If you need to affect it on specific gallery, just share link to page where you use it, we can adjust the code easier

https://www.koblecreative.com/koble-creates/hwp

if it asks for a password try "password"

i added a template gallery in there for editing purposes, you can ignore the actual content below that - if i'd prefer to use a gallery section.

Thank you

Use this code

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
[data-section-id="6499dcdea703c320fec3e58c"] .gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

Because you are using Gallery Grid on this page so the code will be shorter.

21 hours ago, tuanphan said:

Use this code

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
[data-section-id="6499dcdea703c320fec3e58c"] .gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

Because you are using Gallery Grid on this page so the code will be shorter.

excellent. thank you