Does Anyone Know How to Resize the Size Boxes in Symmetry Theme?

[momo12345]

I want to adjust the height and width of my size boxes in my product page.  

My website is: https://stelleworld.com/collections/women-yoga-studio/products/softluxe-leggings

 

[PaulNewton]

Hi @momo12345 👋 in a custom css setting try the following CSS and tailor sizes to need.

⚠️Don't make buttons to small , or so large, they are hard to use on touch devices or people with mobility issues.

label.opt-label {
  min-width: 5.5em !important;
  min-height: 64px !important;
}

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

Test if the !important keyword is unneeded this can help with future flexibility or additional or competing styles.

[momo12345]

Hi PaulNewton,

It does make them bigger, but it does for both the color and size variant and I only want it for the size boxes.

 

[PaulNewton · Accepted solution]

Use .opt-label--btn instead then

label.opt-label--btn { min-width: 5.5em !important; min-height: 64px !important; }

swatches would be label.opt-label--swatch 

[momo12345]

It works great! Thank you!