Center variant pills in product page

[Leonpojen]

Hello, I'm trying to align the variant pills in the center like the add to cart button bellow.

Appreciate if anyone shared the code!

Site url: https://23bc4a.myshopify.com/

/Leon

[kgbfashionista]

Add this code to your theme.css file:

.product-form__input{

align: center;

}

[Leonpojen]

There is no file named theme.css, are you referring to theme.liquid?

[kgbfashionista]

No, there should be a general css file. I might be as well called theme.scss

[Leonpojen]

Not for me?

[PageFly-Victor]

Hi @Leonpojen ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
@media (max-width:767px){
variant-radios#variant-radios-template--17819497562379__main {
    text-align: center;
    justify-content: center;
    display: flex;
}
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

[ZestardTech]

Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset -> base.css and paste this at the bottom of the file:

@media screen and (max-width: 767px){
	.product-form__input {
	    text-align: center;
	    margin: 0 auto;
	}
	.product__title {
	    text-align: center;
	}
	.product-form__buttons {
	    margin: 0 auto;
	}
}