Automatically resizing image for mobile devices only

New Member
2 0 0

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:

<img src="image link" alt="some_text" style="width:500px;height:100px;">


Shopify Partner
223 58 70

This is an accepted solution.

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;
If you found my answer helpful, please LIKE and ACCEPT. ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.