Keep container on mobile image banner section - Dawn

[INFRA]

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)

Website

password: waiheke

How can I best achieve this? Thanks!

[rajweb · Accepted solution]

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

[ZestardTech]

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;
}
}

Let me know if you need further assistance!