Image banner not displaying on dawn theme mobile view

Topic summary

Main issue: Image banners in Shopify’s Dawn theme not showing on mobile, while desktop works. Some stores were password-protected; access details were shared to enable checks.

Resolutions provided (CSS in Assets > section-image-banner.css):

  • Restore mobile banner visibility: under @media (max-width: 749px) set .banner__media { position: relative; }.
  • Make mobile banners clickable like desktop: @media (max-width: 749px) .banner__content { position: absolute; height: 100%; }.
  • Fix grey overlay on desktop after mobile fix: .banner:after, .banner__media:after { opacity: 0 !important; }.
  • For specific sections still hidden on mobile: target section IDs to force display, e.g. @media (max-width: 749px) #shopify-section- .banner__media:first-child { display: block; }.

Outcomes:

  • Original poster confirmed both visibility and clickability are fixed.
  • Another user (Loudi) resolved two banners with section-specific CSS.
  • A user (madroze) received overlay-removal CSS after reporting a greyed image.

Open items / pending help:

  • Some users report the code not working or missing section-image-banner.css; URLs and access requested.
  • One case (perfecthomeusa) still shows white on mobile; helper asked for device/browser details.
  • Separate issue: MP4s not playing on mobile (AsaConcepts) remains unaddressed.

Notes: A screenshot was shared to illustrate the mobile result.

Summarized with AI on January 5. AI used: gpt-5.

@perfecthomeusa

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?