How do I center the variant text and buttons in Dawn 3.0 theme?

Store Design
1

I already centered the product price, “Tax Inclucded” / “Quantity” text and the quantity selector by adding the following code to mybase.css :

.price.price--large.price--show-badge {
text-align: center;
}

.product__tax.caption.rte {
text-align: center;
}

.product-form__quantity-top .form__label {
text-align: center;
}

As I now added color variants for the products I am selling I realized only the price, quantity and quantity selector are centered but the “color” variant text and the variant buttons need to be centered also

How can I fix this?

2

Hello, Wrap them into a div and add: margin:0 auto; in inline style.

I hope that works

3

@Dingus369 ,

Please add this CSS at the bottom in your css file

.price.price--large.price--show-badge,
.product__tax.caption.rte,
.product-form__quantity-top .form__label {
    text-align: center !important;
}

Thanks!

4

@infoatcodelab7

Unfortunately this did not change anything.

The variant text and button are still left-aligned while everything else is centered.

5

@Uzair-zolo

Could you please post a code?

6

@Dingus369 ,

Add this CSS

.price.price--large.price--show-badge,
.product__tax.caption.rte,
.product-form__quantity-top .form__label {
    margin: auto;
    display: block;
}

Thanks!

7

@infoatcodelab7

Sorry, it is still not working.

8

@Dingus369 ,

Please share your site URL, also can you please provide screenshot
I will check out the issue and provide you a solution here.

9

@infoatcodelab7

PM’ed you the details

10

@Dingus369 ,

Please add this CSS at the bottom of your css file

.product-form__input input[type=radio]+label{
    display: table !important;
    margin:10px auto !important;
}
legend.form__label {
    text-align: center;
}

Thnaks!

2 Likes
11

@infoatcodelab7

Thanks for help, the option buttons are now centered but not in the same line anymore but on top of each other instead.

Also the word “color” is still left alligned.

Can you help me to fix this?

12

@infoatcodelab7 :

I need to correct myself:

In smartphone mode everything looks fine now, but in desktop mode the word “Color” is still left alligned and the buttons are alligned, but not in the same line anymore but on top of each other instead.

So I need to code also the center “color” in desktop mode and have the buttons in one horizontal line in both modes.

Your help is appreciated.