Solved

Product Photo stretch now Until Grid Border but the horizontal product photos stretch wrong.

marcelp
Explorer
94 2 14

Hi everyone, I received the code mentioned below to fix Problem 1 (see Photo 1). The code helped to stretch the product photos on the collection page until the grid border (before, there were white lines on the bottom, and the product photo did not stretch until the grid border - see photo 1) but after adding the code I had a new Problem on product pages that have horizontal photos (Problem 2, see Photo 2) When you click on a single product (i.e. the "blue oversize blazer") the last horizontal photo is stretched vertical and is deformed. Can someone provide a similar code like the one mentioned below thatat fixes Problem 1 witouh creating Problem 2? 

 

The Code that fixed Problem 1 but created Problem 2 ( I added it into "theme.liquid"):

<style>
.responsive-image-wrapper.relative.overflow-hidden.w-full.my-0.mx-auto {
    padding-top: 151.68667810177243% !important;
}
</style>

PHOTO 1 / Problem 1 on Collection Page

Screenshot 2023-04-14 at 01.27.33.png

 

PHOTO 2 / PROBLEM 2 On product pages with horizontal photos.

Screenshot 2023-04-16 at 09.53.13.png

 

shop: https://www.cotiereofficial.com/.

pw: "test1234"

Theme: Baseline

 

Thank you.

Best
Marcel 

 

 

Accepted Solution (1)
PageFly-Victor
Shopify Partner
7865 1785 3058

This is an accepted solution.

@marcelp Sorry about that. You can try again and replace the two code snippets I gave in the previous answers with the last one below

<style>
.responsive-image-wrapper.relative.overflow-hidden.w-full.my-0.mx-auto {
    padding-top: 151.68667810177243% !important;
}
ul#splide01-list>li:last-child .responsive-image-wrapper.relative.overflow-hidden.w-full.my-0.mx-auto{
    padding-top: 66.6666667% !important
}
</style>

 

View solution in original post

Replies 9 (9)

PageFly-Victor
Shopify Partner
7865 1785 3058

Hi @marcelp ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
li#splide01-slide06 .responsive-image-wrapper.relative.overflow-hidden.w-full.my-0.mx-auto {
    padding-top: 66.6666667% !important
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

marcelp
Explorer
94 2 14

Hi @PageFly-Victor , thank you for your help but the code is not perfectly fixing it yet. It did fix the blue horizantal photo but som others not. I think it works when I have 6 product photos but it doesnt when I have 7 product photos. See photos attached.

Screenshot 2023-04-16 at 10.47.54.pngScreenshot 2023-04-16 at 10.48.11.png

PS: I have left the old code and added the new code behind the existing one, is that correct? See code below: 

 

  <style>
.responsive-image-wrapper.relative.overflow-hidden.w-full.my-0.mx-auto {
    padding-top: 151.68667810177243% !important;
}
</style>

  
<style>
li#splide01-slide06 .responsive-image-wrapper.relative.overflow-hidden.w-full.my-0.mx-auto {
    padding-top: 66.6666667% !important
}
</style>

 

PageFly-Victor
Shopify Partner
7865 1785 3058

This is an accepted solution.

@marcelp Sorry about that. You can try again and replace the two code snippets I gave in the previous answers with the last one below

<style>
.responsive-image-wrapper.relative.overflow-hidden.w-full.my-0.mx-auto {
    padding-top: 151.68667810177243% !important;
}
ul#splide01-list>li:last-child .responsive-image-wrapper.relative.overflow-hidden.w-full.my-0.mx-auto{
    padding-top: 66.6666667% !important
}
</style>

 

marcelp
Explorer
94 2 14

Perfect, that worked. Thank you so much!

marcelp
Explorer
94 2 14

@PageFly-Victor there is one more thing that needs to get fixed. The horizontal color variation photos are still out of dimension.  Any idea how to fix that?

Here is the link to the product:

https://www.cotiereofficial.com/collections/view-collection/products/cotiere-vintage-sundowner

 

Screenshot 2023-04-16 at 11.22.30.png

PageFly-Victor
Shopify Partner
7865 1785 3058

You can add this code below:

<style>
div[data-media-id="35959242162444"] > .responsive-image-wrapper.relative.overflow-hidden.w-full.my-0.mx-auto{
    padding-top: 66.6605806098229% !important
}
</style>
marcelp
Explorer
94 2 14

Thank you @PageFly-Victor but bnow only the colour variation photos of the sundowner t-shirt is fixed. Is there a code that fixes all the horizontal colour variation photos? 

 

This one is not fixed and I dont want to add a custom code vor each color variation.

https://www.cotiereofficial.com/collections/view-collection/products/black-cotiere-t-shirt

 

Any idea?

Screenshot 2023-04-16 at 12.36.45.pngScreenshot 2023-04-16 at 12.36.35.png

PageFly-Victor
Shopify Partner
7865 1785 3058

@marcelp , After reviewing, please delete all my previous code and replace it with the code below. It will not affect your images on product pages:

<style>
.featured-collection__image.z-0.relative > div {
    padding-top: 150.00000000000003% !important
}
</style>

 

marcelp
Explorer
94 2 14

@PageFly-Victor  somehow still this little issue with the following porduct section:

 

https://www.cotiereofficial.com/collections/view-collection/products/black-cotiere-t-shirt

Screenshot 2023-04-16 at 14.54.37.png