What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

momo12345
Tourist
6 0 1

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

Screenshot 2024-10-07 at 3.50.55 PM.png

Accepted Solution (1)
PaulNewton
Shopify Partner
7450 657 1565

This is an 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 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


View solution in original post

Replies 4 (4)

PaulNewton
Shopify Partner
7450 657 1565

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.

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


momo12345
Tourist
6 0 1

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.

Screenshot 2024-10-07 at 4.16.26 PM.png

PaulNewton
Shopify Partner
7450 657 1565

This is an 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 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


momo12345
Tourist
6 0 1

It works great! Thank you!