Reducing Gallery Margins On Mobile 7.1

Site URL: https://takesunset.squarespace.com/buy-with-us

I consistently have issues with gallery margins on mobile and can't figure it out for the life of me.

The space between the copy and the gallery needs to be reduced as well as the space between the gallery caption and the next section. I used this code and it's working but not exactly how I need it to. You'll see it's actually cutting off some of the copy even though it's still very far away from the section above. 

@media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) {
  [data-section-id="60a2c98eb425ae21a5a143ca"]
  {margin-top: -18%;
  margin-bottom: -18%}
}

@media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) {
  [data-section-id="6080e6d82cca634360115de2"]
{margin-bottom: -15% !important}
}

Website: https://takesunset.squarespace.com/buy-with-us
PW: TakeSunset

Remove your code, add this to Design > Custom CSS > Save & reload your site

/* Mobile - slideshow padding */
@media screen and (max-width:767px) {
.gallery-slideshow.preFade.fadeIn {
    height: 35vh !important;
}
}

Looks like this did the trick! Thank you so much!

On 5/24/2021 at 10:19 PM, JessScarcella said:

Looks like this did the trick! Thank you so much!

If you need fix, let me know, we will give the code

Site URL – https://takesunset.squarespace.com/

1. (Tablet-Homepage) White bar on right of screen

2. (Tablet-Footer) Increase text width?