How to edit DAWN theme settings for mobile layout

nfnfarm
Visitor
1 0 1

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!

Replies 6 (6)

shoprusticrays
Visitor
2 0 1

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

KetanKumar
Shopify Partner
36839 3635 11972

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
shoprusticrays
Visitor
2 0 1

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
Shopify Partner
36839 3635 11972

@shoprusticrays 

do you need some banner look mobile and desktop 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
floralandmoon
Visitor
1 0 0

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
Visitor
1 0 0

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