How to increase spacing between gallery images on mobile? - Wells template

Site URL: https://www.kylalionart.com/

The spacing on my mobile site between my images are too close together. How can I increase it on the Wells template?

21 hours ago, kylalion said:

Site URL: https://www.kylalionart.com/

The spacing on my mobile site between my images are too close together. How can I increase it on the Wells template?

Add to Design > Custom CSS

@media screen and (max-width:800px) {
.collection-type-gallery #slideshow .slide .image-desc-mobile {
    margin-bottom: 80px !important;
}
}

Hello,

I have tried your spacing CSS, but it does not do anything to my spacing. I just want my gallery images to be spaced a little further apart on mobile only. 

On 3/23/2023 at 11:16 PM, Hfendi said:

Hello,

 

I have tried your spacing CSS, but it does not do anything to my spacing. I just want my gallery images to be spaced a little further apart on mobile only. 

What is your site url? Each template will require a different code

hi, i also have the same issue and i presume i would need a custom url. 
Here's the site link: butterphotos.co.uk

I'd like to have more space between my portfolio images on mobile, thanks!

On 7/10/2023 at 7:24 AM, butter1010 said:

hi, i also have the same issue and i presume i would need a custom url. 
Here's the site link: butterphotos.co.uk

I'd like to have more space between my portfolio images on mobile, thanks!

I see you figured it out with this CSS code?

@media screen and (max-width: 767px) {
    .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;
        margin-bottom: 50px !important
    }

    .gallery-masonry .gallery-masonry-item[data-loaded] img {
        width: 100% !important
    }

    .gallery-masonry {
        padding-left: 10 !important;
        padding-right: 10 !important
    }
}