Why are my product images stretching on mobile in portrait mode?

Store Design
1

Hi, we are having problems with our product/variant images appearing ‘stretched’ when viewing them on mobile.

They appear normal when viewing mobile landscape, tablet and desktop but are stretched when viewing mobile portrait mode.

Can anyone help?

We are using Avenue theme 2.0

Thank you

Wilks

2

Hello @WILKS ,

You can resize the image to be fit on mobile only. Here’s our suggestion:

  • Go to Online Store → Themes → Actions → Edit Code
  • Go to theme.liquid file → add the following code
@media (max-width: 767px) {
  .product__image {
    max-width: 100%;
  }
}
  • Save and preview

Hope this will be helpful.

Ali Reviews team.

1 Like
3

Hi @irene-vintage

Many thanks for the information.

I tried adding the code but nothing has changed. I added the code to the footer of the theme.liquid file - is that correct?

Could you advise further?

Thank you in advance

4

Hello @WILKS ,

Yes, the code should be added at the bottom. You may change the ‘px’ to the desired ‘px’ to make it displayed as you want.

1 Like
5

@irene-vintage

Hi thanks for your help but this does not work for us. We did copy and add the code but the variant image still appears stretched when viewing on mobile!