lauzza

On 5/3/2020 at 4:45 PM, michaeleparkour said:

No easy way for that from JS side - SS wrote code in manner you can't really access it or affect, and all masonry calculations goes in code.
But damn, that's a simple CSS, nothing complex:
 

 

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

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

Hey, this code is great apart from the fact it's not in order. I've combined both your code and @tuanphan's code but i still get some vertical spacing. Here is the code:

@media screen and (max-width:640px) {
figure.gallery-masonry-item {
    width: 50% !important;
    float: left !important;
    transform: unset !important;
    position: initial !important;
    display: block!important;
    padding: 5px!important;
    box-sizing: border-box;
}
figure.gallery-masonry-item img {
    width: 100% !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
}

I've also attached how this code is looking. The only issue is the space between the landscape and portrait photos. Feel like we're on the verge of actually getting this code perfect.

I used this on my 7.1 site and it seems to have done the job:

.item-pagination {
  display:none !important;
}

Worked for me but not sure if it would work for others