Quantity and Colour selector not aligning the same on desktop and phone

[Dreedy]

Hey! Me again.

I used this code in my base.css:
quantity-input.quantity { margin: 0 auto; }
div.select { margin: 0 auto; }

to align my quantity and variant selector in the middle and it worked well. Until I realised it only worked for desktop and not the phone. Which turned out to be a tragedy! Haha.
Any help heavily appreciated! 1st photo= PC; 2nd photo= phone; my page- solvior.com

PS: Quantity text alligns because of another code in my product page settings.

[developerSP]

Hello @Dreedy
please add this css Asset > base.css and paste this at the bottom of the file:-

.product-form__input.product-form__input--dropdown {
justify-content: center;
align-items: center;
margin: 0 auto;
}
.product-form__input .form__label {
margin: 0 auto;
text-align: center;
}
.product-form__input .select {
text-align: center;
margin: 0 auto;
}
.quantity {
margin: 0 auto;
}
.product-form__buttons {
margin: 0 auto;
}
.product__info-container>*+* {
margin: 0 auto;
}

[Dreedy]

Hey, first of all thank you. It works in my shopify editor and desktop perfectly. However on my phone it still displays like this →

What I realised is that a lot of changes that I made are showing only in the editor but not on the actual phone device. Could that be my theme? Really appreciated.