Change amount of columns of gallery grid for various screen sizes.

Hi,

I have a masonry gallery and I wanted 4 columns on a standard laptop (MacBook), 5 columns on larger screens (iMac) and 1 column on mobile.

I already found code on how to change the amount of columns to 1 on mobile and added  another piece of code now for 5 columns but it's not working it keeps going from 4 to 1 column instead of 5 once the dimensions are greater than the amount set. I was wondering if anyone knows why this is occurring.

Any help would be greatly appreciated.

Michaela

Here is the code I have added (SS are also below):

/* Masonry 5 items*/
@media screen and (min-width:1920px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 20% !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: 1vw !important;
    padding-right: 1vw !important;
}
}

/* Masonry one item on mobile */
@media screen and (max-width:640px) {
    .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: 1vw !important;
    padding-right: 1vw !important;
}
}

Use this code instead

@media screen and (min-width:1920px) {
 .gallery-masonry .gallery-masonry-wrapper {
        columns: 5;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

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

On 11/20/2023 at 2:46 AM, tuanphan said:

Use this code instead

Thank you, I've added this code and now it changes to 5 columns but the images in the second and third column are slightly lower and I'm not sure how to fix this. Also when decreasing the window width and then increasing again the images aren't in the last two columns.