How can I make variant buttons uniform in the Impulse theme?

[Digital_Imran]

Store URL: Solesart.us
PASSWORD: 1234

Hello everyone. The variant buttons need to be uniform like the screenshot attached. I would greatly appreciate it if someone could provide the code 🙂
Like this  🡻🡻

As of now, variant buttons look like this 🡻🡻

Store URL: Solesart.us
PASSWORD: 1234

[Dan-From-Ryviu · Accepted solution]

Hi @Digital_Imran 

Please add this code at the bottom of your theme.css file to do it

.variant-input {
    width: calc(25% - 10px);
    margin: 0 5px;
    text-align: center;
}
.variant-input-wrap label { 
    width: 100%; 
    background-color: #ddd !important;
}
.variant-input-wrap input[type=radio]:checked+label {
    background-color: #fff !important;
}

 

[Digital_Imran]

Thank you so much @Dan-From-Ryviu . codes work as expected 🙂

Additionally, I always used your app when any of my clients requested a free review app 🙂

[Dan-From-Ryviu]

Happy I could help 😁

[Digital_Imran]

Could you please help me with this @Dan-From-Ryviu ? 
Check : https://community.shopify.com/c/shopify-discussions/hide-some-product-price-on-collection-page/m-p/2...

I will highly appreciate your help 🙂

[Artzen_tech]

Hello @Digital_Imran 
Its Artzen Technologies! We will be happy to help you today.

Follow the Below Steps:
1) Go to your Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following CSS at the bottom of the file above </body>

<style>
label.variant__button-label {
    width: 100px;
    border-radius: 6px;
    background-color: gainsboro;
}
.variant-input-wrap input[type=radio]:checked+label {
    background-color: #fff;
}
</style>

AFTER ADDING ABOVE CSS THE RESULT:

Let me know if need further assistance
Regards,
Artzen Technologies

[Digital_Imran]

Thank you for the reply @Artzen_tech . However , the issue has already been fixed. Thank  you so much for your time and help 🙂

[Artzen_tech]

Hello @Digital_Imran 

Css !important property doesn't use general purpose. It's not a good practice. If you are using !important property it can cause more problems for your store.

And everytime important CSS does not work, sometimes it may effect other CSS on the whole website.

If helpful, please Like and Accept this Solution to help others

[Digital_Imran]

Could you please help me with this? 
Check : https://community.shopify.com/c/shopify-discussions/hide-some-product-price-on-collection-page/m-p/2...

I will highly appreciate your help 🙂