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.
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;
}
}