How to fix mobile banner error on Dawn 13.0 theme?

Store Design

Topic summary

A user encountered a mobile display issue with the Dawn 13.0 theme’s homepage banner. Despite uploading a single image that displayed correctly on desktop, the mobile view showed a distorted or improperly sized image, with half the page appearing empty.

Attempted Solutions:

  • Initial suggestion involved adding CSS code to “base.css” targeting banner height with media queries for screens under 480px width
  • This approach did not resolve the issue

Working Solution:

  • TerenceKEANE provided CSS code to be added to the “image-banner.css” file
  • The code targeted specific banner elements with height: 100vh !important for screens under 771.98px width
  • This successfully fixed the mobile banner display

Resolution: The issue was resolved using the final CSS solution, which properly scaled the banner image to full viewport height on mobile devices.

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

I’m using the Dawn 13.0 theme. I got the image I wanted on the desktop on the homepage. Although it asked for two images in the banner, I uploaded a single image and there is no problem. But when I check from mobile, a very bad image occurs. Officially half of the page is empty :slightly_smiling_face: How can I fix this? Preview link below. Thank you in advance.

https://ujpt9cyruh3i95w0-85574287682.shopifypreview.com

2

@hefoli please add the below code to the “base.css” file

@media screen and (max-width:480px){
.banner {
  height: 100vh;
}
.banner__media{
  height: 100vh;
}
}
3

Unfortunately it didn’t work :disappointed_face:

4

Hey @hefoli

Can you please share me the screenshot of code you have added. also , I can’t see the code i have given to you on the website.

5

When it didn’t work, I deleted it to avoid an error. Now I’m adding it again and sending ss. When it didn’t work, I deleted it to avoid an error. Now I’m adding it again and throwing ss. This method only takes the image from top to bottom on mobile, but does not make it full page. I will not remove the code so you can check it on mobile.

ss4.PNG
ss4.PNG880×376 12.9 KB

6

@hefoli add the code in “section-image-banner.css” file.

7

u can use below code!

@media (max-width: 771.98px){
    div#Banner-template--22121307996482__image_banner {
        height: 100vh!important;
    }
}

Terence Keane

Best Regards,

8

DUDE, YOU ARE AWESOME! Thanks for your helping!