Sort Size Bubbles on product page

[ChrisM187]

Hello, I would like to ask if anyone knows how to makde sure that all the size bubbles are aligned on the product page in order not to look so messy! Maybe make them into squares instead of bubbles? 

Thank you in advance,

Chris

URL: Trinitysneakers.com

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
.product-form__input--pill input[type=radio]:disabled+label, .product-form__input--pill input[type=radio].disabled+label {
    width: 100px !important;
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[Rahul_dhiman]

Hello @ChrisM187 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-product-varient-picker.css
add this code at the end of the file.

.product-form__input--pill input[type=radio].disabled+label {
border-radius: 6px !important;
}

result
 

If this was helpful, hit the like button and accept the solution.
Thanks