Changing color of both the view bag and add to cart buttons

[cconquest98]

Hi guys, 

Looking for some help with changing the colour of a few buttons. Firstly the add to cart button, i went in and changed the code for this which worked when I go to view my store on my laptop however on my phone it hasnt changed. 

Secondly i'm struggling with changing the 'View cart" button, if followed tutorials on changing the colour of this one but nothing seems to be working. 

My store is Sunny Straps (mysunnystraps.myshopify.com)

Access 1855

thanks in advance!! 

[Liquid_xPert_SJ · Accepted solution]

Hi@cconquest98 welcome to the Shopify Community,

Please add below code to your theme.liquid file before the </body> tag and hit save hopefully your issue will be resolve.

<style>
#cart-notification-button {
	background-color: #D67747 !important;
}
</style>

[cconquest98]

Thanks so much for your help that's worked! 

Any ideas on why the add to cart button is the right colour when viewing my store on my laptop but not when i view it from my phone? 

[Liquid_xPert_SJ]

@cconquest98 

can you please share a screenshot.

thanks

[cconquest98]

Yeah on my phone it looks like this

[Liquid_xPert_SJ]

@cconquest98 

can you please place below code into your base.css file or theme.liquid file and hit save

@media screen and (max-width: 990px) {
.card--card .quick-add product-form .button {
	background: #d67747 !important;
	color: #fff8f2 !important;
}
}

Thanks

Thanks

[shraddha_patel]

Hello @cconquest98 ,

Find below css in "base.css" and Remove "media" query [@media (prefers-reduced-motion: no-preference) and (hover: hover)] from your css you've added for color changes in "base.css"

Current css

@media (prefers-reduced-motion: no-preference) and (hover: hover)

product-form .button {

1. background: #d67747;
2. color: #fff8f2;

}

After changes css block should look like -

product-form .button {

1. background: #d67747;
2. color: #fff8f2;

}

Let me know if any.

Thank you

[cconquest98]

 

Hey Shraddha, 

Thank you for your reply but when I look into this I can’t see that my current css looks like the one you’ve referenced there,  I can’t see that it includes the “@media (prefers-reduced-motion: no-preference) and (hover: hover)” above? 

[Jamesjan]

Hi How are you?