How to edit DAWN theme settings for mobile layout

[nfnfarm]

Hi there,

I am using DAWN and have an image banner section on my homepage. The image banner section has a setting to show text box on desktop, which is very useful considering text is less visible over images. However, there is no option to keep the text box in the mobile layout, only to stack the text box under the image,  meaning the home page text (very valuable for our UX) isn't legible, which isn't user friendly at all. 

How can I edit image banner settings just for mobile layout? Either to keep same text box as desktop layout, or change the background image just for mobile layout.

Thank you to whoever can help!

[shoprusticrays]

Have you found a solution for this? I am also needing the same text box to show on mobile that shows on desktop.

[KetanKumar]

@nfnfarm 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[shoprusticrays]

My site url is https://rusticrays.com/

I would like my mobile to show with a text box over the main banner image, just like it does on my desktop. Dawn theme offers this, but only with an outlined box and no option to edit text color on mobile either. I hope that makes sense!

[KetanKumar]

@shoprusticrays 

do you need some banner look mobile and desktop 

[floralandmoon]

Hey @shoprusticrays. I came across your question while looking for the same thing, and I think I have your solution.

Paste this in the botttom of section-image-banner.css:

@media screen and (max-width: 750px) {
.banner__box {
padding: 3rem;
width: 75%;

}

Then find this code:

.banner:not(.banner--mobile-bottom) .banner__box {
background-color: transparent;
--color-foreground: 255, 255, 255;
--color-button: 255, 255, 255;
--color-button-text: 0, 0, 0;

}

...and change the word transparent to your text box color code and the same for the button color. It should look like this:

.banner:not(.banner--mobile-bottom) .banner__box {
background-color: #(your color code here);
--color-foreground: 255, 255, 255;
--color-button: (#your color here);
--color-button-text: 0, 0, 0;

}

I hope this makes sense. Just keep in mind if affects all boxes throughout your site. Good luck!

[pinkpalace]

I'm having this issue as well. My website is https://pinkpalace.boutique