Automatically resizing image for mobile devices only

Solved
jtunstall
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;">

 

0 Likes
g33kgirl
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.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.