Site URL: https://www.clic.com/
Hi,
I have been having an issue with this site that I can't seem to find an ideal solution to. There are many product pages with different types of products that all have different dimensions of images. Some are artworks that cannot be cropped and are mostly horizontal while some are products that are mostly vertical. Having all images at the same aspect ratio while also having the slideshow gallery option (rather than stacked) causes some of the artworks to be cut off on the checkout page.
I tried adding in some css to solve this. This is what I used:
.ProductItem-gallery-slides-item-image {
object-fit: contain !important;
object-position: middle;
width: 100% !important;
height: 100% !important;
position: static !important;}
.tweak-product-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides::before {
padding-bottom: 0 !important;}
.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {
position: relative !important;}
This did successfully stop images from being cut off on the checkout page, but some of the images show up too large and were blurry. It also created an issue with the slideshow gallery of secondary product images (they showed up with a large gap underneath the main image rather than directly underneath).
I removed the code and right now am temporarily using the stacked option, but this isn't ideal and some images are still too big on the checkout page. Here are examples of this issue:
https://www.clic.com/art-books/picasso-sculpture
https://www.clic.com/love-tanjane/raw-pleat-collar-dress-in-army-from-love-tanjane
Is there a way to assign different aspect ratios to different pages of the site without any images cutting off, without images being too big/blurry, and with still being able to use the slideshow option?
Thank you!