Image banner not displaying on dawn theme mobile view

Store Design

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.
22

@Loudi
oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.
@media (max-width: 749px) {
#shopify-section-template--20596814348636__image_banner_ke7dDV .banner__media:first-child {
  display: block;
}
}

on mobile view

KetanKumar_0-1706703876701.png
KetanKumar_0-1706703876701.png538×838 218 KB

1 Like