Unwanted zooming of pictures on Refresh theme

Store Design
,

Topic summary

A Shopify store owner using the Refresh theme encountered unwanted image zooming on product pictures with varying heights, particularly visible in search results and collection pages.

Issue Details:

  • Products with less height were displaying abnormally zoomed images
  • Affected areas: search function and collection browsing
  • Store sells office products with images of different dimensions

Solution Provided:
A CSS fix was shared to prevent the zooming:

.card__media img {
  object-fit: contain !important;
}

Implementation Challenge:
Initial attempt failed because the code was placed inside a media query block in base.css. The helper identified the issue and instructed to close the media query bracket first, then add the CSS code outside of it.

Resolution:
After correctly positioning the code outside the media query, the solution worked successfully. The issue was marked as resolved.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I sell officeproducts and some pictures have less height. In search-function and while surfing through collection those images are abnormally zoomed, how to disable this zooming?

www dot merkendistributie dot nl - and search for ‘pen’ press the search button and some abonormally zoomed images will appear.

(resizing the images to square would be the best solution, but if I can avoid that with some code I would be happy!)

thanks in advance!

2

You can add this code to your CSS file:

.card__media .media img {
    object-fit: contain !important;
}
3

Thanks very kindly, I have added it to base.css - no result so far :disappointed_face:

4

I can’t see it in base.css. Where have you added it?

5

Ahh, I see you have added it but it is in a media query. You need to close the bracket of the media query and add the code outside it.

@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role="button"]:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role="button"]:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
} <-- add this bracket here

  .card__media .media img {
    object-fit: contain !important;
}
1 Like
6

Wow you are MASTER, thanks very kindly! You are true about the Bracket!

Solution accepted :slightly_smiling_face: Cheers cheers cheers so much!

Okay, for everyone with the same issue : The base.css is build up into more sections which are closed by brackets. Find the right one. And go go go

1 Like