How can I resize my collections banner on mobile in Dawn theme?

Store Design
1

I’m having some trouble getting my Collections Banner to resize on mobile. See the two images attached for examples. The images are 300x900 .png files. Any assistance would be appreciated.

website: www.greencreekcandlecompany.com

Mobile.jpg
Mobile.jpg343×457 17.1 KB

Desktop.jpg
Desktop.jpg1324×440 35.2 KB

2

Hi @GreenCreek

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px) {
.collection-hero__image-container.media.gradient img {
    object-fit: contain;
}
}

And Save.

Result:

Made4uoRibe_0-1713127582220.png
Made4uoRibe_0-1713127582220.png596×592 58 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

@GreenCreek , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
[id] .collection-hero [class*='collection-hero__image']{
    max-width: 100%;
    position: relative;
    height: auto !important;
}

[id] .collection-hero [class*='collection-hero__image'] img{
    max-width: 100%;
    position: relative;
    height: auto !important;
    width: 100%;
    object-fit: unset !important;
}

diego_ezfy_0-1713135927327.png
diego_ezfy_0-1713135927327.png496×484 44.7 KB

You may want to upload an image with greater quality to avoid the blurriness.

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

4

This is Noah from PageFly - Shopify Page Builder App

Hi @GreenCreek please add code here to fix full size image:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

5

I tried all 3 and here were the results in order of the replies.

Made4uo-Ribe: I tried this and it looked like it was going to work. The preview looked promising but when I refreshed it went back to the way it was. Not sure what was causing that to happen but I couldn’t replicate the size changing.

Diego_ezfy: This worked as what I was looking for. I don’t seem to get the blurriness on my phone but I do see it in the mobile preview window.

PageFly-Noah: It resized it but it resized it super small. It doesn’t span the width of the page in mobile.

Thanks to everyone for submitting solutions. I appreciate the multiple approaches as it was helpful to find one that worked as I was envisioning it.