How do I get my variant boxes to become the same size?

[ampador]

Hello, 

I am wondering how I am able to get my variant boxes (size, color, quantity) on my product page, the same length and size as the "add to cart" and "buy it now" boxes that are right below them. 

Is there some sort of code that can be sent to me, so i can add? 

Please look at my photo for referece, 

Thank you!

 

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

[ampador]

my website url is : www.ampador.com

[ampador]

I have a password on it, the password is : Ampador2020! if needed 

[PageFly-Noah · Accepted solution]

Hi @ampador  Iam sorry for delay, I have seen vinsinfo help you set full width of input. and you want more set text small center. you can add code here to set text small to center, please add code in file theme.liquid and above tag </head>:

<style>
.product-form__input:nth-child(1) .select__select{
    text-align: center !important;
}

</style>

Or if you want set text small and purple of color to center please add code here:

<style>
.product-form__input .select__select{
    text-align: center !important;
}
</style>

Thank you so much.

[ampador]

Great, it worked.

I truly appreciate your help with all of my inquiries! 

[PageFly-Noah]

Thank you. No Problem , Have a nice day 😉 !

[Vinsinfo]

@ampador Please follow the below steps to change the length of the variant boxes. Let me know whether it is helpful for you.

1. Go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Go to product page and click "Product information" section like in the below attached screenshot.

4. Locate "Custom CSS" field and paste the below CSS code like in the below attached screenshot.

.quantity {
    width: 100% !important;
}
.product-form__input .select {
    max-width: 100% !important;
}

5. Then the final output will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[ampador]

Thank you very much, it worked!

One last question, do you know how I can center the the word "small" inside of the "sizes" box. 

I have added a picture for reference, the size box where it says "small" is there anyway I can center that? Because now, it located in the left size of the box.

Thank you in advance!

[Vinsinfo]

@ampadorGlad to hear that our solution works for you! Please provide your support by click "Like" and "Accepted" for the previous solution.

Please follow the below steps to center the text in the variant boxes. Let me know whether it is helpful for you.

1. Follow the first 3 steps mentioned in the previous comment.

2. Then paste the below code in the "Custom CSS" field in addition to the existing code like in the below attached screenshot.

variant-selects .select__select option {
    text-align: center !important;
}

3. Then the final output will be like,

Please provide your support by click "Like" and "Accepted" if this solution works for you. Thanks for your support.