Dawn Button displaying different on Mobile

Eighty8
Tourist
6 0 6

I have the dawn theme.

on the homepage I have a image banner with a pink button overlay showing on the desktop, but on the mobile version it’s transparent and black. 

I would like it to show up as it is on the desktop version.

 

0679ED16-4D39-4086-B7D2-08214012C0EF.png

Replies 11 (11)

KetanKumar
Shopify Partner
36839 3635 11972

@Eighty8 

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
tessastbury
Explorer
64 0 25

Hi Ketan,

Can you help me with the same query? I would like the colour block that appears on desktop to also display on mobile.

My url is https://tesss-astbury-test.myshopify.com/

Many thanks,

Tess

KetanKumar
Shopify Partner
36839 3635 11972

@tessastbury 

sorry for that issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

.banner__buttons a.button.button--primary {
    opacity: 1;
    background: #000;
    color: #fff;
}

 

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
tessastbury
Explorer
64 0 25

Hi Ketan,

Thanks so much for this. Apologies for not being clearer – I'm actually needing the whole coloured box surrounding all of the the text and buttons to appear on mobile.

Can you help?

Many thanks,

Tess

KetanKumar
Shopify Partner
36839 3635 11972

@tessastbury 

yes please check your theme setting color option it allow this 

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
tessastbury
Explorer
64 0 25

Thanks Ketan. The colour is set in theme settings, but won't display on mobile.

Is there some code that will make the whole block appear on mobile rather than just the button?

Many thanks.

KetanKumar
Shopify Partner
36839 3635 11972

@tessastbury 

do you mean like this?

KetanKumar_0-1636172941747.png

 

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
tessastbury
Explorer
64 0 25

Hi Ketan,

Sorry for not being clearer. I mean like this:

Screen Shot 2021-11-07 at 6.06.58 pm.png

Many thanks.

KetanKumar
Shopify Partner
36839 3635 11972

@tessastbury 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.banner:not(.banner--mobile-bottom) .banner__box {background-color: #000;}
}

 

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
tessastbury
Explorer
64 0 25

That's exactly what I wanted, thanks Ketan!

KetanKumar
Shopify Partner
36839 3635 11972

@tessastbury 

its my pleasure to help us

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