Automatically resizing image for mobile devices only

Store Design

AI-generated summary

Need: make a custom image added in product-template.liquid resize properly on mobile without distortion. The image is 500×100 and is displayed above the Add to Cart button, but it appears stretched on smaller screens.

Current suggestion:

  • Add a CSS media query for screens up to 768px wide (@media only screen and (max-width: 768px)), which targets mobile-sized devices.
  • Apply object-fit: contain; so the image keeps its proportions instead of being distorted.
  • It was specifically noted that the rule should ideally target a class name or ID, not all img elements, to avoid affecting every image site-wide.

Outcome:

  • A possible CSS-based fix was provided.
  • No final confirmation was posted showing whether the solution worked, so the issue appears still open.
1

I used a single 500px by 100px image so i could display icons above my add to cart button but it is currently being distorted on mobile devices . I added it by adding a line of code that contains the link to the image in the product-template.liquid file. How do i set a rule to make the image resize on mobile devices? The code i used was:
2

Hi @jtunstall , you can add this code to your CSS file to make your image resize on mobile devices:

@media only screen and (max-width: 768px) {
  img { <-- give a classname or id preferably, otherwise this will apply to all images
     object-fit: contain;
  }
}