How to set Dawn default collection page to adapt to the banner image ratio

AlanDerrick
Tourist
11 0 4

I need to set the default collection page image ratio to "adapt to image" similar to the setting for the home page. Does anyone know how to do this?

Currently, it crops the image based on the browser window size.

Does Not Display Correctly.pngHome Page Displays Correctly.png

Replies 4 (4)
JHKCreate
Shopify Partner
2922 504 723

Hi @AlanDerrick 

Would you mind sharing your store's URL so we can provide a solution for that? Let me know!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com
Learn more about us: jhkcreate.com
Satisfied with our solutions? Drop a review on Google

JHKCreate
Shopify Partner
2922 504 723

Add the following code to the end of the base.css file:

#shopify-section-template--15144234287253__banner > div > div > div.collection-hero__image-container.media > img
{
object-fit:contain!important;
}


Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com
Learn more about us: jhkcreate.com
Satisfied with our solutions? Drop a review on Google

AlanDerrick
Tourist
11 0 4

The additional code did not appear to work. I've attached a screen shot showing how I placed it. The theme seems to force the graphic into a 9:16 ratio container. My graphic is 1:1.

Fullscreen_10_25_21__11_06_AM.jpg