Highlighted button color is changing on mobile

[Synesty]

Hi,

The color of my highlighted button automatically switches on mobile for no reason and I don't know how to fix it since there's no option to change the color for this specific case.

I'm using turbo theme.

The section is : image with text overlay

Thanks !

[KetanKumar]

Hello, @Synesty 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[Synesty]

Hi KetanKumar, here is my shop : 

https://bit.ly/3hQlj3i 

Password = tretwo

I hope you will be able to help me !

[KetanKumar]

Hello, @Synesty 

give me screen short further issue 

[Synesty]

Okay, the button on PC looks like this :

And on Phone the white bg switches to dark grey : 

The button text color is not a problem, I can modify it.

[KetanKumar · Accepted solution]

@Synesty 

Thanks for the.

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 480px) {
.homepage-slideshow a.highlight-true, .homepage-slideshow input[type="button"].highlight-true {
    border-color: #ffffff;
    background-color: #ffffff;
    color: #333;
}
}

details.

[Synesty]

Hi @KetanKumar 

It worked, thanks a lot for your time !

[KetanKumar]

@Synesty 

Thanks for the update and your compliment

[Buganvilla]

Hey KetanKumar, 

I have the exact same problem as Synesty. However I tried your solution but it didn't solve the problem :S Any ideas? Thanks!

[KetanKumar]

Hello, @Buganvilla 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[paradisepouches]

paradisepouches.org 

Hello Ketan. Having the same issue here and attempted your suggested fix without success.

[Buganvilla]

Hey dude, I guess it depends on the theme.

I use turbo and had to find my own solution, although I have slight notions of css. 

We had a problem with the "background-color:" of our button. I suggest you go check that button with the chrome inspect element tool, to find the class or ID that references your button, and then go to your style.scss file, look for that class or ID, and change the "background-color:" to the same color you have on desktop.

I'm sorry I couldn't explain it better but hope that helps 🙂

[bphung30]

I did this and it didnt work but now my desktop button got smaller and I removed the code, but nothing changed. 

I am stuck with a small CTA home screen now. Is there a reason why I deleted the code but the effect is still there?

[LayalA]

Hi Ketan, 
Does the same suggested solution above work for the boundless theme as well? I have the same issue with the color of the CTA & footer changing from desktop to mobile.

[KetanKumar]

@LayalA 

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.

[LayalA]

Hi Ketan,

Thanks for getting back to me. 
https://www.thehairwand.co/
Password: awmpab

[KetanKumar]

@LayalA 

can you please share screenshot which button do you have change color 

[LayalA]

Sure, the issue is appearing on emails only. Below are screenshots of the same email viewed on Desktop(MAC) and Mobile Phone(Andriod). The correct colors are the ones shown in the desktop screenshots    

DESKTOP
Desktop - CTA
Desktop - Footer

MOBILE
Mobile - CTA
Mobile - Footer

[KetanKumar]

@LayalA 

sorry but i can't see any button can you please show me

[LayalA]

The issue is appearing in emails, but on the website. Sorry for the confusion. The screenshots before are from an email I'm sending from Shopify. Does that help?

[KetanKumar]

@LayalA 

no problem 

can you please show me button