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

40 1 9


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


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:


Screen Shot 2023-05-24 at 9.37.04 pm.png



Replies 3 (3)

1245 113 148
  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;


40 1 9

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.

1 0 0

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