Gallery Section in 3 Columns on Mobile

What does this code do?

This code snippet will allow you to have your Grid Gallery display in columns on mobile.

Grid: Simple

A Simple Grid already displays in two columns on mobile. You can use this code to have it display in three or more columns.

Make sure your Gallery is set to a Grid: Simple layout. Then copy and paste this code into Design > Custom CSS.

/* Gallery in Three Columns on Mobile */
@media only screen and (max-width: 641px) {
  .gallery-grid-wrapper {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
  }
  .gallery-grid-item-wrapper {
    min-width: 30vw;
  }
}

Grid: Strips

Make sure your Gallery is set to a Grid: Strips layout. Then copy and paste this code into Design > Custom CSS.

/* Gallery in Three Columns on Mobile */
@media only screen and (max-width: 641px) {
  .gallery-strips-wrapper {
    column-count: 2; // number of columns
    column-gap: 0px;
    height: unset !important;
  }
  .gallery-strips-item-wrapper {
    height: unset !important;
  }
  .gallery-strips-item {
    position: relative !important ;
    transform: none !important;
    width: 49vw !important; // width of each row
    margin: 1vw; // space above and below image
  }
  .gallery-strips-item img {
    object-fit: contain !important;
    height: auto !important;
  }
}

Then adjust the number of columns and the spacing between. This code is set for two columns. If you want it in three columns, change the column-count to 3 and then adjust the width of each row to less than 33vw.

Grid: Masonry

A Masonry Grid already displays in two columns on mobile. You can use this code to have it display in three or more columns.

Make sure your Gallery is set to a Grid: Masonry layout. Then copy and paste this code into Design > Custom CSS.

/* Gallery in Three Columns on Mobile */
@media only screen and (max-width: 641px) {
  .gallery-masonry-wrapper {
    column-count: 3; // number of columns
    column-gap: 0px;
    height: unset !important;
  }
  .gallery-masonry-item-wrapper {
    height: unset !important;
  }
  .gallery-masonry-item {
    position: relative !important ;
    transform: none !important;
    width: 32vw !important; // width of each row
    margin: 1vw; // space above and below image
  }
  .gallery-masonry-item img {
    object-fit: contain !important;
    height: auto !important;
  }
}

How To Use It

1. Copy and paste the code as indicated above.

2. Adjust the number of columns and the spacing.