Image resizes badly when link added, how to fix

[GSS_Social]

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?


Thanks

GSS

[Samita-Danny]

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

[Small_Task_Help]

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;
}

[GSS_Social]

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

<li id="Slide-template--18307479208073__multicolumn_fVFRyK-1" class="multicolumn-list__item grid__item center scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 4;">
            <div class="multicolumn-card content-container">
                <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--full-width multicolumn-card-spacing">
                  <div class="media media--transparent media--adapt" style="padding-bottom: 140.6862745098039%;">
                    
                      <a href="/collections/ansi-class-2">
                    
                    <img src="//2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=600" alt="" srcset="//2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=50 50w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=75 75w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=100 100w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=150 150w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=200 200w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=300 300w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=400 400w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=500 500w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=600 600w" width="600" height="844" loading="lazy" sizes="
                      (min-width: 1400px) calc((1400px - 132px) * 1 /  5),
                      (min-width: 990px) calc((100vw - 132px) * 1 / 5),
                      (min-width: 750px) calc((100vw - 100px) * 1 / 1),
                      calc((100vw - 30px) * 1 / 1)
                    " class="multicolumn-card__image">
                    
                      </a>
                    
                  </div>
                </div><div class="multicolumn-card__info"></div>
            </div>
          </li>

[SEOAnt-Jeffery]

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.

<img src="//2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=600" alt="" srcset="//2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=50 50w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=75 75w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=100 100w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=150 150w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=200 200w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=300 300w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=400 400w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=500 500w, //2de4wv-rx.myshopify.com/cdn/shop/files/class_R2.png?v=1747028569&amp;width=600 600w" width="600" height="844" loading="lazy" sizes=" (min-width: 1400px) calc((1400px - 132px) * 1 / 5), (min-width: 990px) calc((100vw - 132px) * 1 / 5), (min-width: 750px) calc((100vw - 100px) * 1 / 1), calc((100vw - 30px) * 1 / 1) " class="multicolumn-card__image">

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.

[GSS_Social]

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.

[SEOAnt-Jeffery]

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.

[GSS_Social]

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

[SEOAnt-Jeffery]

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