Keep container on mobile image banner section - Dawn

Store Design

Topic summary

A user is trying to maintain the desktop layout of Dawn theme’s image banner section on mobile devices. Currently, when the ‘container’ option is enabled on mobile, the content moves below the image instead of staying overlaid on top.

Desired outcome:

  • Keep text/content positioned over the banner image on mobile
  • Match the desktop appearance where content overlays the image

Solution provided:
Two respondents offered identical CSS fixes:

  1. Navigate to Online Store > Themes > Edit code
  2. Open assets/component-image-banner.css or base.css
  3. Add custom CSS targeting the specific banner section with:
    • Semi-transparent background for readability
    • Margin adjustments for mobile screens (max-width: 750px)

One respondent included a visual reference showing the expected result. The solution uses section-specific targeting to avoid affecting other banner instances. Additional customization options (button stacking, typography) were offered if needed.

Status: Solution provided, awaiting implementation confirmation from original poster.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi,

On the Image banner section on Dawn, when I keep ‘container’ toggled on for mobile, it moves below the image but I would like to keep the content on top of the image and show the same as on desktop (like below)

Screenshot 2025-04-22 at 16.57.33.png
Screenshot 2025-04-22 at 16.57.33.png560×566 358 KB

Website

password: waiheke

How can I best achieve this? Thanks!

1 Like
2

Hey @INFRA ,

Add This CSS to Fix Mobile Overlay:

Go to Online Store > Themes > Edit code, then:

  1. Open assets/component-image-banner.css (or base.css if your version doesn’t have the other).

  2. Add this CSS to the bottom of the file:

@media screen and (max-width:750px){
#shopify-section-template--15544755257416__image_banner .banner__box {
    background: rgba(var(--color-background), 0.7) !important;
    margin:20px !important;
}
}

Let me know if you’d like to make the buttons stack vertically on mobile or fine-tune typography!

Best,

Rajat

Shopify Expert

1 Like
3

Hello @INFRA ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:750px){
#shopify-section-template--15544755257416__image_banner .banner__box {
    background: rgba(var(--color-background), 0.7) !important;
    margin:20px !important;
}
}

ZestardTech_0-1745305583207.png
ZestardTech_0-1745305583207.png449×756 334 KB

Let me know if you need further assistance!