Collection Hero Image Full Width on Mobile - DAWN THEME

[LauraKincade]

Hi Shopify Community,

I’m facing an issue with the collection hero image on my Shopify store: https://www.laurakincade.com/collections/in-stock

I’m trying to make the .collection-hero__image-container of all my collections full width on mobile devices.

I’ve tried the following CSS code within a media query, but it doesn’t seem to be working:

@media screen and (max-width: 750px) {
    .collection-hero__image-container {
        width: 600px !important;
        max-width: 100% !important; 
    }
}

Despite adding !important, the styles don’t override existing ones. The image still appears cropped on mobile screens. I’ve also attempted other variations without success.

Any insights or alternative approaches to achieve full-width responsiveness on mobile would be greatly appreciated. Thank you!

Best regards,

[PageFly-Henry]

Hi @LauraKincade

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 750px) {

.collection-hero__image-container img {

object-fit: contain !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Dan-From-Ryviu]

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below under

[LauraKincade]

Thanks Dan,

Unfortunately this code didn’t work as it made the block disappear. Also I feel a bit nervous on editing the theme liquid file, would be better if I can make it work with changing CSS only.

Thank you!

[LauraKincade]

Thanks Henry!! This actually works, I now only need to make disappear the light grey lines on top and below the image. Any idea how to improve this? Thank you!