Center Variant Selections/Add to Cart Button

Hello!

I'm trying to center my variant section options/add to card button (circled in red on the photo).

I've tried the following code (below) from another post, but it wants to move the price/afterpay line as well. I do not want those to move.

.ProductItem-details-checkout {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

I've tried playing with it, but don't know how to isolate only the variants and add to cart button. Any help would be appreciated!

Thank you!

Hi,

Can you share link to this product? We can help easier

On 2/27/2023 at 5:19 AM, tuanphan said:

Hi,

Can you share link to this product? We can help easier

Yes, here it is!

https://www.valiscosupply.com/products/p/double-braided-collar-two-color

On 3/8/2023 at 9:36 AM, Valisco said:

Yes, here it is!

https://www.valiscosupply.com/products/p/double-braided-collar-two-color

Add to Design > Custom CSS

/* Mobile Product Center */
@media screen and (max-width:767px) {
.ProductItem-details .product-variants {
    margin: 0 auto !important;
}
.product-quantity-input {
    margin: 0 auto;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    margin: 0 auto;
}
}

13 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile Product Center */
@media screen and (max-width:767px) {
.ProductItem-details .product-variants {
    margin: 0 auto !important;
}
.product-quantity-input {
    margin: 0 auto;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    margin: 0 auto;
}
}

 

That worked beautifully! Thank you!! Last question,

I decided I liked this layout on desktop as well. When I use the same code, the quantity input box doesn't move to center like the rest. Is there a solution for this?

Thank you!

12 hours ago, Valisco said:

That worked beautifully! Thank you!! Last question,

I decided I liked this layout on desktop as well. When I use the same code, the quantity input box doesn't move to center like the rest. Is there a solution for this?

Thank you!

Add text-align: center; to this code

.product-quantity-input {
    margin: 0 auto;
    text-align: center !important;
}