Solved

Highlighted button color is changing on mobile

Synesty
Tourist
4 0 2

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 !

Accepted Solution (1)
KetanKumar
Shopify Partner
36854 3637 11976

This is an 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.

 

 

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

View solution in original post

Replies 20 (20)

KetanKumar
Shopify Partner
36854 3637 11976

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.

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
Synesty
Tourist
4 0 2

Hi KetanKumar, here is my shop : 

https://bit.ly/3hQlj3i 

Password = tretwo

I hope you will be able to help me !

KetanKumar
Shopify Partner
36854 3637 11976

Hello, @Synesty 

give me screen short further issue 

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
Synesty
Tourist
4 0 2

Okay, the button on PC looks like this :

Synesty_0-1596127452834.png

And on Phone the white bg switches to dark grey : 

Synesty_1-1596127490158.png

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

KetanKumar
Shopify Partner
36854 3637 11976

This is an 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.

 

 

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
Synesty
Tourist
4 0 2

Hi @KetanKumar 

It worked, thanks a lot for your time !

KetanKumar
Shopify Partner
36854 3637 11976

@Synesty 

Thanks for the update and your compliment

 

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
Buganvilla
Tourist
4 0 4

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
Shopify Partner
36854 3637 11976

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.

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

paradisepouches.org 

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

Buganvilla
Tourist
4 0 4

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

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
Tourist
4 0 2

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
Shopify Partner
36854 3637 11976

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

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
LayalA
Tourist
4 0 2

Hi Ketan,

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

KetanKumar
Shopify Partner
36854 3637 11976

@LayalA 

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

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
LayalA
Tourist
4 0 2

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 - CTADesktop - CTA
Desktop - FooterDesktop - Footer

 


MOBILE
Mobile - CTAMobile - CTA
Mobile - FooterMobile - Footer

KetanKumar
Shopify Partner
36854 3637 11976

@LayalA 

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

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
LayalA
Tourist
4 0 2

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
Shopify Partner
36854 3637 11976

@LayalA 

no problem 

can you please show me button  

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