Image Banner Height on dawn theme

Topic summary

Mobile image banner in Shopify’s Dawn theme crops a portrait image; the requester wants the banner to be taller on mobile to show the full image.

Proposed approaches:

  • Use a separate image for mobile. Check if the theme editor supports distinct desktop/mobile images; if not, adjust banner height via CSS.
  • Create two banner sections (one for desktop, one for mobile) and use CSS media queries to show/hide each: max-width: 749px for mobile, min-width: 750px for desktop.

Implementation notes:

  • The provided media-query CSS initially caused the entire banner to disappear for the requester, indicating a selector or section-targeting mismatch. CSS media queries change styles based on screen width.

Outcome:

  • The requester ultimately resolved the issue by adapting it to the desktop image (no specifics shared). The exact code or settings used were not detailed.

Status:

  • Considered resolved by the requester. Key open detail: no final, shareable code or precise configuration was provided.
Summarized with AI on December 27. AI used: gpt-5.

I solved this by adapting it to the desktop image, thanks all