How can I fix cropped product images on mobile without affecting the desktop version?

Shopify Discussion
1

On mobile my product images are cropped, can someone tell me how to fix this issue without effecting desktop version.

store url: https://c1e46d.myshopify.com/collections/all

2

Hi @suoshie

We have checked your website and found that the product image on mobile is not cropped as you mentioned. If you need further help, please provide us with screenshots and detailed requirements. We’re happy to support you.

3

@suoshie

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:575px) {
    .card-wrapper.product-card-wrapper {
        padding-top: 20px;
      }
      .card--media .card__inner .card__content {
        padding: calc(var(--image-padding) + 0rem);
      }
}