Jump to content

smarret

Member
  • Posts

    3
  • Joined

  • Last visited

smarret's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. I used what I had pasted above: 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;} Just tweaking the ratio as needed.
  2. Thank you! I tried this out, but I'm not sure if the code I had above works for this since it seems to not change anything when I put it in the header under html. I also am still having the issue of images cutting off once I put the slideshow option on the checkout page.
  3. 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!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.