How can I fix blurry headers and mobile issues in the Dawn theme?

Store Design
,

Topic summary

A user encountered two problems with Shopify’s Dawn theme: blurry header images and difficulty displaying separate mobile/desktop banners.

Initial Issues:

  • Header images appeared blurry
  • Both mobile and desktop headers displayed simultaneously on mobile view
  • Attempts to fix each issue individually using provided code solutions broke the other feature

Resolution:
The user successfully resolved both problems by:

Technical Solution:
Added CSS code to section-image-banner.css using media queries (@media screen and (max-width: 749px)) to:

  • Hide all .banner__media elements on mobile
  • Display only the second .banner__media element (mobile-specific banner)
  • Hide the first .banner__media element (desktop banner)

This approach allows separate banner images for mobile and desktop views while maintaining image quality.

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

I am working with the dawn theme and have two issues:

I can solve each individually with the code given, but I always break the other.

Currently, I have a non-blurry header, but both mobile and standard header in the mobile view.

Where can I change the selection for the mobile header to only select the mobile (2nd image)?

2

HI @JensC

This is David at SalesHunterThemes.

I found this video, he guide how to add custom code to make the separate image for desktop and mobile.
You can try to follow and update for your theme.
https://www.youtube.com/watch?v=uGtL02KI1LE

3

Solved it with the video below + chatGPT to specifically exclude the desktop banner if size is mobile.

Code added to the bottom of section-image-banner.css:

@media screen and (max-width: 749px) {
.banner__media {
display: none !important; /* Hide all .banner__media elements /
}
.banner__media:first-child {
display: none; / Hide the first .banner__media element /
}
.banner__media+.banner__media {
width: 100%;
display: block !important; / Show only the .banner__media that follows another .banner__media */
}
}