Code: https://will-myers.com/articles/responsive-full-width-gallery-section-images
/* ==== DESCRIPTION ==== */
Full width images within a gallery sections in Squarespace 7.1 get cropped depending on which device you’re viewing it on. In this tutorial, I’ll walk you making your gallery sections responsive through a single line of code.
/* ==== USAGE ==== */
Add a new gallery section onto your page with some images. Be sure the gallery type is set to Slideshow: Full.
Copy and paste the code on my website into your Design » Custom CSS area. Be sure to replace the data-section-id value with the specific data-section-id of your gallery section. Use the Squarespace ID Finder (link below) for help finding your section id.
In the clamp() function, the first value, 0px, is the minimum height the section can be. The second value, 56.25vw, is the preferred height of section — this is the value to adjust to set an aspect ratio. The last value is the maximum height the section can be.
I chose 56.25vw as our preferred height as that is the aspect ratio of a 16:9 image.
56.25vw comes from 9 divided by 16 multiplied by 100vw. Feel free to adjust this value to reflect the aspect ratio you want to maintain.
/* ==== ADDITIONAL LINKS ==== */
Plugin Store: https://www.will-myers.com/products
Learn: https://www.will-myers.com/newsletter
Newsletter: https://www.will-myers.com/learn-css-in-squarespace
SS ID Finder: https://www.will-myers.com/id-finder
