How can I resize the variant picker on a product page in Dawn Theme?

[ecom33]

Hello!

I wish to resize the variant picker on the product page. What code do I need to add to make those icons smaller?:

Is there a similar way as it is with Add To Cart button, where to edit it I just need to paste the code like below to the bottom of base.css:

Thank you for help.

[dmwwebartisan]

@ecom33 

Please share store URL!

Thanks!

[diego_ezfy · Accepted solution]

@ecom33, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.product-form__input input[type='radio'] + label[for*='template']{
    padding: 10px 25px !important;
    font-size: 14px !important;
}

@media (max-width: 749px){
.product-form__input input[type='radio'] + label[for*='template']{
    padding: 9px 24px !important;
    font-size: 13px !important;
}

}

You can customize the values as per your wish:

10px = height
25px = width
14px = font size

9px = height (mobile) 
24px = width (mobile)
13px = font size (mobile)

In this particular case, setting up a height and width via padding works much better since the content's width varies depending on the variant's name.

Kind regards,
Diego

[ecom33]

Works 100% or better! @diego_ezfy ...... you are awesome!

[ecom33]

@diego_ezfy  Can you please add the information on how to leave "Color"- on the left, but center those 4 options?

Please, help if you can! Best regards.

[Checkit]

Hi Diego,

i would like to make the variant section smaller and both variants (color+size) side by side.

Please let me know if its possible.

thx.

regards

danny