Unwanted zooming of pictures on Refresh theme

[mauricegosselaa]

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!  

[g33kgirl]

You can add this code to your CSS file:

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

[mauricegosselaa]

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

[g33kgirl]

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

[g33kgirl · Accepted solution]

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

[mauricegosselaa]

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

Solution accepted  🙂   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