[Share] Gallery – 2 columns 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.

If CSS code doesn't work, you can send link to page where you use Gallery, I will check it again.

#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

In my example, it is

Next, use CSS code like this to Custom CSS box.

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