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

RemG
Excursionist
40 1 9

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

 

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

 

Cheers.

Replies 3 (3)

NomtechSolution
Astronaut
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;
}
​

 

RemG
Excursionist
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.

Nakatomi
Visitor
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%;
}