Changing aspect ratio to show full image in 'Full' style of product page

Page url: https://www.miraiathletics.com/shop/p/shorts

Hi,

I have a product details page set to the 'Full' layout style, I have used custom CSS shown below

@media screen and (min-width: 768px) {
 .pdp-gallery-wrapper {
  height: 30vw;
}
}

@media screen and (max-width: 768px) {
 .pdp-gallery-wrapper {
  height: 90vw;
}
}

to reduce the height of the gallery so that the product details are visible before scrolling, which has cropped a large portion of the images. I have two 3:2 images as the product photos and I would like to shrink them down to fit to the height of the gallery (or something around 110% of it) showing most of full image, instead of filling the width and cropping the edges. I understand this would not fill the width of the screen with two images so I have added a third image (GIF) at the moment. I have attached a screenshot of the existing page and one with drawings showing the goal. (This is not an issue on mobile, only the desktop version). Thanks very much

Cheers

Fin

You can use this code to Website > Website Tools > Custom CSS

@media screen and (min-width:768px) {
.pdp-layout-full-width-carousel .pdp-gallery-slides[data-landscape] {
    width: 33.333% !important;
}
}

If you want code effect above product only > You can edit that product > Additional Info > Add a Block > Choose Code > Paste this code

<style>
  @media screen and (min-width:768px) {
.pdp-layout-full-width-carousel .pdp-gallery-slides[data-landscape] {
    width: 33.333% !important;
}
}
</style>

Thanks very much @tuanphan, this code works great however the carousel actually scrolls past the images as if there were 3 full width images, not a big deal but would be interested to know if you have any ideas to fix it? Thanks

Cheers

Fin

On 4/6/2024 at 8:35 AM, FinLB said:

Thanks very much @tuanphan, this code works great however the carousel actually scrolls past the images as if there were 3 full width images, not a big deal but would be interested to know if you have any ideas to fix it? Thanks

 

Cheers

Fin

I tried but can't find a way to fix this.

No worries, thanks for your help.