Stop portrait gallery images from being cropped on mobile

site: https://www.amethystwallgallery.com/

pass: Help123!

Hi, 

On the mobile version of my site, I have a fullscreen gallery with portrait images on my homepage. Whatever the size of device (or window, while I'm working on the site on desktop), there is some degree of crop on the width of the image. I am trying to make it so that the full height and width of the portrait images are uncropped (so the image size scales with screen size while keeping it's intended aspect ratio) but I cannot figure out the right way to do this with CSS. I have managed to do it for a landscape gallery on the desktop version of my site, but yeah I cannot figure out doing the same for a portrait gallery for some reason.

Please help me, much more capable people!

Below is an example:

The one on the right is still slightly cropped but much less so than the one on the left.

Can you pinpoint where on your website this gallery is? Thanks!
Are all of the images the same portrait ratio? Or do they vary?

1 minute ago, Ziggy said:

Can you pinpoint where on your website this gallery is? Thanks!
Are all of the images the same portrait ratio? Or do they vary?

The gallery is on the initial page when you enter my site, when the window is 768px or less so it only appears on mobile. The images are all the same portrait ratio at the moment yes, would it be problematic if I put in different portrait ratio images in the future?

I only see the landscape orientation Squarespace placeholder images on this page: https://www.amethystwallgallery.com/

Just now, Ziggy said:

I only see the landscape orientation Squarespace placeholder images on this page: https://www.amethystwallgallery.com/

You have to make the window less than 768px wide by shrinking it, like emulating what a mobile phone screen size:

Interesting setup!

You'll want to set the section height to 150vw i.e. 150% of the viewport width. If you have different ratio images they will crop, we can only realistically adjust it for one ratio.

@media only screen and (max-width:768px) {
  section[data-section-id="63798eeaee080368d89450b5"] .gallery-fullscreen-slideshow {
    height:150vw !important;
  }
}

Let me know if that works.

6 minutes ago, Ziggy said:

Interesting setup!

You'll want to set the section height to 150vw i.e. 150% of the viewport width. If you have different ratio images they will crop, we can only realistically adjust it for one ratio.

@media only screen and (max-width:768px) {
  section[data-section-id="63798eeaee080368d89450b5"] .gallery-fullscreen-slideshow {
    height:150vw !important;
  }
}

Let me know if that works.

Haha sorry that it was a bit of an ordeal to start working on 😅

That works perfectly, thank you so much! I can work around using just that aspect ratio no problems at all, I'm just so glad to have a solve so thank you again!

No problem! I set the height for a 2:3 image ratio (150%) if you switch to a 3:4, 4:5 or 9:16 change the 150% to 133.33%, 125% or 177.77% respectively.