Image resizes badly when link added, how to fix

Store Design
, , , ,

Topic summary

A Shopify store owner encountered an image distortion issue where adding a custom link to one image caused it to enlarge incorrectly, while another linked image displayed properly despite using identical code.

Troubleshooting suggestions included:

  • Applying CSS to constrain linked images (setting width: 100%, height: auto, max-width: 100%)
  • Checking for conflicting custom code sections that both control image sizing
  • Investigating potential image overcompression from third-party apps

Resolution:
The issue was resolved when the original poster found a working code solution, though the specific fix wasn’t shared in detail. The problem appeared to stem from code conflicts rather than the linking mechanism itself, since identical code produced different results on different images.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi

I added some custom code to make it to allow images to have their own link, and the image above has a link and is fine.
The image next to the blue image (ANSI) also has a link, but the theme or system seems to enlarge it out of shape and size. How can I fix this so the image shows the correct size?

Screenshot 2025-05-12 at 11.35.23 AM.png
Screenshot 2025-05-12 at 11.35.23 AM.png1150×1638 225 KB

Thanks

GSS

1 Like
2

Could you please provide the page URL? I can help with some CSS code

3

Hi,

Hope this will help

  • Find File with the Image Code (HTML for the Image)
  • Add CSS

CSS example

a img {
width: 100%;
height: auto;
max-width: 100%;
display: block;
}
4

Either I am putting in wrong place or it’s not working. This is the associated code to the image

-
5

Hi @GSS_Social

Usually, when it comes to an image resized or blurred issue after adjusting, it is mostly related to two reasons: Overcompressed or incorrect code added. This issue should be caused by your added code with a high possibility.

Like the code you shared above, I can find out two kinds of custom code working on image sizes, and this may be the cause code why your images don’t appear so good. To resolve this issue, I suggest you double-check with theme developers and see if you need to remove one of the codes added or move the last custom code to a place outside this code section. Thank you.

6

The fact that the image above has a link and doesn’t oversize and this one does and that code is the same on both makes me believe there is something more than that code making it stretch.

1 Like
7

That makes sense here. You can also further check if it is caused by other APPs, like what I mentioned before, the images may be overcompressed.

8

I managed to get a piece of code that resolves the issue.
Thanks!

1 Like
9

Pleasure here, hope your issue can be resolved soon with this piece of code~

1 Like