First Product Image Is Tinnier Than The Rest

[bbdoll]

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. 

[Moeed]

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

[bbdoll]

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 

[Dan-From-Ryviu · Accepted solution]

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=AfmBOooj7Aajf13BHjuoQddywn3cXPr...

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; }
}

[bbdoll]

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. 

[bbdoll]

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

[Dan-From-Ryviu]

You are most welcome! 

[tim]

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;
}