Gallery Padding - Desktop vs Mobile

Hello Forum,

I've been using this block of code in the advanced  panel of 'Page Settings' in order to assure that on a mobile device the gallery images display as a single column. The problem I'm having is that it doesn't add any padding below the images and they just stack on top of each other. Anyone know if I can alter this code to adjust bottom padding?

As a crappy workaround I just added a caption to every photo which is set to <br> but it adds too much padding to both the mobile and the desktop photos (see screenshot below).

Thank you for any thoughts.

Mike.

<style>
  @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;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 2 !important;
    padding-right: 2 !important;
}
}
</style>

14 hours ago, Parz1978 said:

Hello Forum,

I've been using this block of code in the advanced  panel of 'Page Settings' in order to assure that on a mobile device the gallery images display as a single column. The problem I'm having is that it doesn't add any padding below the images and they just stack on top of each other. Anyone know if I can alter this code to adjust bottom padding?

 

As a crappy workaround I just added a caption to every photo which is set to <br> but it adds too much padding to both the mobile and the desktop photos (see screenshot below).

 

Thank you for any thoughts.

Mike.

 

 

 

 

<style>
  @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;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 2 !important;
    padding-right: 2 !important;
}
}
</style>

Can you share your site with the protected password so I can take a look?

https://parziale.squarespace.com/config/pages

Is this the link you would need? POW is the name of the subpage. Password should be set to public.

Thanks for taking a look and let me know if that's not the right link.

Mike

Thanks! This worked perfectly. Much appreciated. 

Mike.