Image banner mobile full screen dawn theme

Shopify Discussion

Topic summary

A user is experiencing an issue with the Dawn theme’s image banner feature where mobile images get cropped instead of displaying full screen, despite desktop images appearing correctly.

Initial Solution Provided:

  • Add custom CSS code to section-image-banner.css or theme.liquid file (before </head> tag)
  • Code targets specific banner ID and sets height to 80vh with object-fit properties
  • Includes media query for screens under 767px width

Resolution:
PageFly-Victor successfully implemented the code fix, and the original poster confirmed it worked perfectly. However, they realized their image dimensions weren’t optimal for the layout.

Ongoing Issues:
Multiple other users report experiencing the same problem:

  • One user unable to replicate the solution successfully
  • Another tried modifying base.css, image-banner.liquid, and theme.liquid without success
  • Questions remain about optimal image dimensions and configuration settings

The discussion remains active with users seeking similar fixes for their Dawn theme mobile banner displays.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hello there,

For my home screen banner I have chosen the image banner function, for which you can choose an image for your desktop and mobile. For my desktop the image can be very nicely seen in its full size. However, the image on the mobile version gets cropped, even though the picture should be full screen.

mel999_0-1663767072556.png
mel999_0-1663767072556.png1242×2688 523 KB

Could anyone help me with the code on how to make this image full width/screen? Thank you for you time in advance!!

Greetings,

Mel

Store link: https://le91a8g5djzddja8-62119084228.shopifypreview.com

2

Hi @Mel999

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> section-image-banner.css paste the below code at the bottom of the file.

@media(max-width:767px){

#Banner-template–15730478481604__image_banner{

height:80vh !important

}

#Banner-template–15730478481604__image_banner .banner__media.media.banner__media-half:last-child{

height:100% !important

}

#Banner-template–15730478481604__image_banner .banner__media.media.banner__media-half:last-child img{

object-fit: unset !important

}

}

Best Regards;

PageFly

3

Dear PageFly,

Thank you so much for your reply and help. I can’t seem to get the code to work, tested it multiple ways. Could you perhaps help me further?

Greetings,

Melissa

4

if you can’t add the file then you can add it to the theme.liquid file. paste my code before element

@media(max-width:767px){ #Banner-template--15730478481604__image_banner{ height:80vh !important } #Banner-template--15730478481604__image_banner .banner__media.media.banner__media-half:last-child{ height:100% !important } #Banner-template--15730478481604__image_banner .banner__media.media.banner__media-half:last-child img{ object-fit: unset !important } }

PageFly_0-1663780243858.png
PageFly_0-1663780243858.png1264×562 48.3 KB

If it still doesn’t work, you can give me access via email Nghiahh@bravebits.vn. and i will help you

5

I just added code, you can check and give me feedback. Thank you

6

Wow, thank you so much! It is perfect! I see that my image is just not right for the website so I’ll have to adjust that myself. Where did you edit the code?

YOUR SETUP.jpg
YOUR SETUP.jpg1242×2688 361 KB

7

Dear PageFly,

Thank you so much for the help. I now uploaded the full screen image: could you tell me what code you changed and help me with making the image full screen?

Thank you so much for your time and effort in advance!

Kind regards,

Mel

8

Hi, i’m trying to do this also and having no success with this code

Could you please help

9

I’m having this same issue. I’ve tried changing the code in base.css, image-banner.liquid, and theme.liquid. None of those have worked for me. The Dawn theme banner on my mobile version is still too big. Can you please fix it for me?

Here’s my link: thesuyaymarket

Thank you!

1 Like
10

What size did you use for the image and were you every able to get it full screen. Also how do you have the function to where you can post different pictures on desktop and mobile. I have the dawn theme as well