How to stop cropping of images in collection pages and thumbnails? Dawn Theme

Store Design
, ,
1

Hi,

I am currently on Dawn 7.0 and would like to upgrade to 9. I have downloaded the theme and I am unable to add padding to my non square images to prevent them being cropped.

I currently have this setup on my working site:

Screen Shot 2023-05-24 at 8.03.20 pm.png
Screen Shot 2023-05-24 at 8.03.20 pm.png1846×1282 377 KB

This is the link to the updated Dawn theme and how the images are showing, as you can see they are being cropped to a square rather than keeping the original ratio and having padding added in:

https://80jalsy4d1up5f3t-19218055.shopifypreview.com

Screen Shot 2023-05-24 at 9.37.04 pm.png
Screen Shot 2023-05-24 at 9.37.04 pm.png1187×1152 559 KB

Cheers.

2
  1. In the left-hand sidebar, click on “Edit code”.
  2. In the code editor, open the “theme.scss.liquid” file located under the “Assets” folder.
  3. Scroll to the bottom of the file or find a suitable place to add your custom CSS code.
  4. Add the following CSS code to add padding to non-square images:
.grid__image {
  object-fit: contain;
  object-position: center;
}
​
3

Thanks for the reply, I do not have a theme.scss.liquid file. I tried placing in the base.css file however this did not work.

4

Thanks for the hints here, this ended up working for but with a different css selector (maybe the name has changed in more recent template code?):

.card__media .media img {
  height: 100%;
  object-fit: contain;
  object-position: center center;
  width: 100%;
}