Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hello,
I recently observed a problem with my product pages image gallery. I have many differently sized product images. And some are much higher than wide. These images appear to be displaying at a max width, but no max height.
This affects how other images in the gallery are displayed on the product page when these types of oblong images exist in the same image gallery/slideshow. These other images with proper dimensions are then displayed too low from the top of the page. This is occurring on both desktop and mobile.
How can this be fixed?
Solved! Go to the solution
This is an accepted solution.
Hi @adamsubtractem ,
I would like to give you the recommendation to support you so kindly follow the steps below:
1. Go to Online Store > Theme > Edit code of your current theme
2. Open your theme.liquid theme file
3. Paste the below code before </head>
<style>
.product .product-photo-container .slick-list {
height: 480px;
}
.product .product-photo-container .thumb {
padding-bottom: 100%;
}
.product .product-photo-container .thumb > a {
position: absolute !important;
width: 100%;
height: 480px;
top: 0;
left: 0;
}
.product .product-photo-container .thumb > a > img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
</style>
Let us know how it works for you.
Best regards,
GemPages Support Team
Hello @adamsubtractem ,
It's the GemPages Support Team and we are glad to assist you today!
Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?
Best regards,
GemPages Support Team
This is an accepted solution.
Hi @adamsubtractem ,
I would like to give you the recommendation to support you so kindly follow the steps below:
1. Go to Online Store > Theme > Edit code of your current theme
2. Open your theme.liquid theme file
3. Paste the below code before </head>
<style>
.product .product-photo-container .slick-list {
height: 480px;
}
.product .product-photo-container .thumb {
padding-bottom: 100%;
}
.product .product-photo-container .thumb > a {
position: absolute !important;
width: 100%;
height: 480px;
top: 0;
left: 0;
}
.product .product-photo-container .thumb > a > img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
</style>
Let us know how it works for you.
Best regards,
GemPages Support Team
Hi @adamsubtractem ,
My solution can be helpful to you.
Let us know how it works for you.
Best regards,
GemPages Support Team
This worked. Thank you!
I am glad that my solution is helpful to you.
Best regards,
GemPages Support Team