Centering Quantity Selector

[cravingravioli]

Hi, looking to center the Quantity and the Quantity selector. Tried using css code from other forums but it was still misaligned. Thanks.

[goldi1]

HELLO @cravingravioli 

Can you please send me the Website URL.

Thanks

[cravingravioli]

rehydrazn.com
pw: nowlow

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
div.product-form__quantity {
display: flex;
flex-direction: column;
align-items: center;
}
}

</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

if this not worked then share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[cravingravioli]

Don't know if I copied something wrong but it did nothing

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
   div.product-form__quantity {
       text-align: center !important;
   }
   div.product-form__quantity .price-per-item__container {
        display: flex !important;
        align-items: center !important;
         justify-content: center !important;
    }
}

</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[cravingravioli]

added the code and it was still in the same spot, am i adding something wrong?

[Dan-From-Ryviu · Accepted solution]

Hi @cravingravioli 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.product-form__input {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100% !important;
}

[cravingravioli]

Worked, thank you.