How can I alter the variant button color on mobile?

[Heinrich123]

Hey Guys,

I want to change the coloring of the variant buttons. Using this css code it changes it for desktop: 

.product-form__input input[type=radio]:checked+label {
background: #1a73c7 !important;
}

but on mobile the buttons are still black.

The domain is: printnotes.de password: 1

Thanks in advance,

best regards

[oscprofessional]

Hello @Heinrich123 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media only screen and (max-width: 600px){
.product-form__input input[type=radio]:checked+label {
    background: #1a73c7 !important;
}
}

[theycallmemakka · Accepted solution]

Hi @Heinrich123 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
variant-radios .product-form__input input[type=radio]:checked+label {
background: #1a73c7!important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,

Makka

[Heinrich123]

Thank you my friend!

[calv2]

Thank you so much. This solved it

[Caldeira]

Hey Makka, been a long time since you answered this question, but I´m having the exact same issue and even after trying your code the issue presists. Do you think yoiu could help me out please?

[theycallmemakka]

Hi @Caldeira ,

You can private message me with the Store URL and i will let you know the solution as per the theme.