Shopify themes, liquid, logos, and UX
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
PHOTO 2 / PROBLEM 2 On product pages with horizontal photos.
shop: https://www.cotiereofficial.com/.
pw: "test1234"
Theme: Baseline
Thank you.
Best
Marcel
Solved! Go to the solution
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>
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
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.
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>
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>
Perfect, that worked. Thank you so much!
@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
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>
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?
@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>
@PageFly-Victor somehow still this little issue with the following porduct section:
https://www.cotiereofficial.com/collections/view-collection/products/black-cotiere-t-shirt
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025