Gallery – 2 columns of Images for desktop gallery and 1 column for mobile

To achieve 2 columns of images Gallery on Desktop and 1 column on Mobile, you can follow these.

#1. Gallery Grid

You can hover Gallery Section > Click Edit Section

Change number of column images on Desktop here

On Mobile, you can use this code to Website Tools > Custom CSS to force it to 1 column.

@media screen and (max-width:767px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}}

If you want to apply this for specific gallery, you can find Gallery ID. Use this tool.

In my example, it is:

section[data-section-id="66c2fd5aa1b5905d9100c36c"]

Next, use this CSS code

section[data-section-id="66c2fd5aa1b5905d9100c36c"] {
@media screen and (max-width:767px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}}}

#2. Gallery Strips

With Gallery Strips, you can Edit Section

Then adjust the Row Height. For each Row Height value, the gallery will display a different number of columns of images.

With this change, Strips is already 1 column on Mobile, if you want to force Strips to 2 columns on Mobile, you can use this CSS code to Website Tools > Custom CSS.

@media (max-width: 767px) {
    .gallery-strips .gallery-strips-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    .gallery-strips-item-wrapper {
        height: auto!important;
    }
    .gallery-strips-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    .gallery-strips .gallery-strips-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}

To make it affect on specific Strips only, you can find Gallery Strips ID, similar #1, then use CSS code like this.

section[data-section-id="66c2fe1078d02d100042a466"] {
@media (max-width: 767px) {
    .gallery-strips .gallery-strips-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    .gallery-strips-item-wrapper {
        height: auto!important;
    }
    .gallery-strips-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    .gallery-strips .gallery-strips-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}}

#3. Gallery Masonry

You can edit the Gallery Masonry Section then change this option

To make it to 1 column on mobile, you can use this CSS code

@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
.gallery-masonry-item-wrapper  img {
    width: 100% !important;
}
}

to make it run on specific Masonry, you can find Masonry Section ID, use #1 tool. Then use CSS code like this.

section[data-section-id="66c2fedf4f347e205755537a"] {
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
.gallery-masonry-item-wrapper  img {
    width: 100% !important;
}
}}