Mobile Padding Masonry Gallery

Hi, I'm having a slight issue trying to create larger padding for my site on mobile, it looks fine on desktop but would like more space between my images in my galleries. If someone could help with this that would be great. https://jmphoto.online/seniors

You can use this code to Website Tools > Custom CSS. You can adjust 10px to another value to increase/decrease space.

@media only screen and (max-width: 767px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 4;
        column-gap: 0px;
        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: 10px!important;
        box-sizing: border-box;
    }

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

Thank you, worked great. I have one more issue with another part of the site, on the desktop and iPad view. I have a code injected that splits the navigation between the title and header links, but when in a smaller window it all compresses behind the title, is there a way to fix it so the links are always in its same position?

Jmphoto.online

You can consider using this approach