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

How can I fix the image size issue on my product pages?

Solved

How can I fix the image size issue on my product pages?

adamsubtractem
Tourist
3 0 1

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?

 

screencapture-collections-bar-and-wine-cabinets-products-colonial-hutch-2023-03-14-22_53_18.png

 

 

 

 

screencapture-collections-bar-and-wine-cabinets-products-colonial-hutch-2023-03-14-22_52_18.png

Accepted Solution (1)
GemPages
Shopify Partner
5625 1262 1292

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

GemPages_0-1678867904548.png


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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5625 1262 1292

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
adamsubtractem
Tourist
3 0 1

Hi there, GemPages! The url is www.tipplergoods.com

There is no password.

Thanks in advance!

GemPages
Shopify Partner
5625 1262 1292

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

GemPages_0-1678867904548.png


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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
GemPages
Shopify Partner
5625 1262 1292

Hi @adamsubtractem ,

 

My solution can be helpful to you.

 

Let us know how it works for you.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
adamsubtractem
Tourist
3 0 1

This worked. Thank you!

GemPages
Shopify Partner
5625 1262 1292

I am glad that my solution is helpful to you.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center