Dawn Theme V 8.00 - How to adapt collection page images to product image container.

Alexandriabooks
New Member
9 0 0

Hi there,

 

Hoping someone can assist us with adapting our product images within the image container on the collection pages.

 

We like the size of the 'portrait' option, however as our images vary in size it cuts the overflow off so you cannot see the whole image. 

 

Ideally we would like them to look similar to the 'adapt to image' option, however for the bottom of the images to remain in line. They are currently aligned at the top, which makes the product names, etc. float upwards and looks quite messy (refer below).

 

Screen Shot 2023-03-18 at 3.25.06 pm.pngScreen Shot 2023-03-18 at 3.35.24 pm.png

 

After some research there appears to be a line of code which does this (object-fit: contain), however it doesn't seem to work when inserting it anywhere in my code. 

 

Does anyone know a solution for this? 

 

Thanks!

Replies 7 (7)
Columbus_Themes
Shopify Partner
73 6 6

Please attach a link to your store and what theme you're using.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
Alexandriabooks
New Member
9 0 0

Hi Columbus_Themes,

 

Please find our store link below: 

 

https://alexandriabooks.com.au/

 

We are using the Dawn theme (version 8.0.0)

Columbus_Themes
Shopify Partner
73 6 6

Can't see the case you're showing on the screenshot, please change your theme settings to exactly match the case you're mention.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
Alexandriabooks
New Member
9 0 0
Hi Columbus_Themes,

Confirming the store settings have now been updated to reflect the screenshots.

These changes apply to the collection pages, the collection carousels on the home page, and the search results page.

Let us know if you have any further queries.
Alexandriabooks
New Member
9 0 0

Hi Columbus_Themes,

 

Just wondering whether you had any luck with solving this? 

 

Let me know if you require anything else. 

 

Regards,

Phoenix 

Columbus_Themes
Shopify Partner
73 6 6

Tbh we didn't manage to find the page having the issue you're mentioning, if you can please attach a link to a page that's having such an issue.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!