How to adapt Dawn theme banner container for mobile viewing?

Store Design
, , , ,

Topic summary

Goal: keep the white banner container (Dawn theme) on mobile similarly to desktop.

What was tried:

  • Store link and password shared to enable review. Initial CSS made the desktop container disappear and didn’t affect mobile; it was removed.
  • Targeted mobile CSS (via @media max-width: 767px and a section-specific selector) applied: set .banner__box to white background, adjusted width (~70–75%) and margins. Result: mobile layout improved and accepted by the requester.

Constraints/decisions:

  • Centering the container like desktop on mobile would increase vertical length/scroll; not recommended. Mobile designs typically avoid such containers.

New issue (mobile visuals):

  • On iPhone X, collection images and “Shop by brand” blocks appear uneven; requester wants all images the same (preferably larger, like sale items) and the “In offerta” badge smaller.
  • On Android and desktop, images look equal size to the helper, suggesting an iPhone-specific rendering issue. Further debugging on an iPhone is needed; no code fix provided yet.

Notes:

  • Screenshots were central to evaluating layout and differences across devices.
  • Discussion remains open regarding iPhone-specific image sizing and badge adjustments.
Summarized with AI on January 23. AI used: gpt-5.
12

@FlipShop - add this css to the very end of your base.css file and check

@media screen and (max-width:767px){
#shopify-section-template--17535372230920__696dd426-1133-4c51-9e0d-d847c858d14c .banner__box{background: #fff !important; --color-foreground: #414141 !important; --color-button: inherit !important; --color-button-text: #fff !important;     width: 70%;}

#shopify-section-template--17535372230920__696dd426-1133-4c51-9e0d-d847c858d14c .button{color: #fff !important;}

}
1 Like