How do I make the product variant/option dropdown wider?

Highlighted
New Member
5 0 0

I'm looking at this page here: http://nwfa-test-store.myshopify.com/products/skyjacker-stainless-steel-brake-lines

 

As you can see, I need to make the dropdown box a few characters longer to clean up the look. How do I do this?

Thanks!

0 Likes
Highlighted
Shopify Expert
9925 103 1763

Add a little bit of padding to the element via CSS. That one has 3 pixels:

select {
   padding: 3px;
}

You may prefer to use ems though, so the size is relative to the font:

select {
   padding: .25em .5em;
}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
5 0 0

Thanks for the reply Jason. I don't know anything about CSS, at least not yet! Can you tell me where I edit that?

0 Likes
Highlighted
Shopify Expert
9925 103 1763

Do you have a link handy with a drop down in action? That will make it easier to suggest placement within your theme styles.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
5 0 0

Yep, it's in the first post :)

0 Likes
Highlighted
Shopify Expert
9925 103 1763

(note to self, go get caffeine!)

This is what you have now in your styles.css.liquid at  around line 907:

.variants select {
    width: 175px;
    padding: 3px;
}

if you want to add more space inside the box, increase the padding. If you need to make the box bigger either increase the width, or remove the width line entirely. The latter could be a problem as it could bump into the price.

Try something like:

.variants select {
   max-width: 250px; /* use max-width so if the box can be smaller it will be */
   padding: .25em; /* or just leave as 3px -- up to your */
}

Time to start my day right, so I'm off for my caffeine run...

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
5 0 0

Perfect, thanks!

 

*coffee cheers*

0 Likes
Highlighted
Tourist
7 0 0

I am using Debut & I cant find styles.css nor shop.css?

0 Likes