First Product Image Is Tinnier Than The Rest

Technical Q&A
, , ,

Topic summary

A user reported that the first product image on their Shopify store (using Ella 6.5.2 theme) displays smaller than subsequent images, despite all images being resized to identical dimensions. The issue was visible on product pages, with the first image appearing noticeably “tinnier” while images 2 onward displayed normally.

Troubleshooting attempts:

  • Initial code edits and product card option changes proved ineffective
  • A CSS solution targeting .productView-image with media queries was suggested but didn’t resolve the issue
  • An alternative CSS fix for .productView-img-container was also proposed

Resolution:
The problem was solved by following instructions from a linked HaloThemes article specifically addressing Ella theme image errors. The user confirmed this solution successfully fixed the display inconsistency.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

My site is bbdoll.com using Ella 6.5.2 Theme. When go to product page, the first image of all the product appears tinnier than the rest of images even after I resize every one to the same size. I have tried editing the code and changing the product card options, however, it seems nothing is working out. Fyi, from second image to the last, they all look normal but the first one.

First Product Image is tinnier
First Product Image is tinnier1316Ă—910 123 KB

The rest of Images look fine
The rest of Images look fine1450Ă—920 263 KB

2 Likes
2

Hey @bbdoll

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

hello, the url to one of the product pages is https://bbdoll.com/products/brand-new-fine-looking-alice-launch-day-165cm-5ft4-c-cup there is no password to it. Thanks

4

Hi @bbdoll

You can try to follow instructions in this article to solve the issue

https://halothemes.net/blogs/shopify/fixing-ella-image-error?srsltid=AfmBOooj7Aajf13BHjuoQddywn3cXPrtPyyjANjVxs8hKW2Kaj8oyn_i

Or add this code to Custom CSS of your theme settings

@media (max-width: 749px) {
 .productView-image.fit-unset .productView-img-container img:not(.zoomImg) { min-height: 400px !important; }
}
@media (min-width: 750px) {
 .productView-image.fit-unset .productView-img-container img:not(.zoomImg) { min-height: 671px !important; }
}
1 Like
5

Thanks Dan! I have tried adding the code but nothing changed. I am going to try the linked article now and will report the result later.

1 Like
6

Try adding this code to, say, sections “Custom CSS” setting:

.productView-img-container.product-single__media {
  padding-top: 100% !important;
}

.media img {
  position: absolute !important;
  bottom: 0 !important;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
7

the solution in the link works!! the problem solved! Thank you Dan!!

1 Like
8

You are most welcome!