How to auto resize image on mobile with a custom liquid image

Store Design
, ,
1

I have kinda ask this for the first time now but no one seems to answer this. I would like to auto-size my desktop image to mobile version for a 1:1 image as a 16:9 image.

Could anybody help me with this?

website url is: https://milehac.com/products/lower-back-wrap-sacroiliac-belt-women-posture-sacroiliac-si-joint-support-belt-for-women-and-men-reduce-pelvic-back-discomfort

2 
@media screen and (max-width: 767px) {
  .product-single__photo {
    max-width: 100%;
    height: auto;
  }
}

This CSS code will resize the “.product-single__photo” image to be 100% of its parent container width on mobile devices with a maximum width of 767 pixels. The “height: auto;” property will automatically adjust the height of the image to maintain its aspect ratio.

1 Like
3

Where do you put this code? I have the same issue, I am testing 3 different devices in portrait and landscape mode, some are able to display the images in my product landing page properly but some get cut off on the sides. Can you help?