Automatically resizing image for mobile devices only

Store Design
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;
  }
}
2 Likes