Return to previous page

Continued: Single product page: “Add to Cart & Quantity” Aligning issue

This topic has 3 replies, 2 voices, and was last updated 11 months, 2 weeks ago ago by Kris

Kris

Participant

May 15, 2023 at 14:08
Hello support team,

Continuing a previous convo regarding single product page add to cart button, URL: https://www.8theme.com/topic/single-product-page-add-to-cart-quantity-layout-always-centered/#post-356436

Support Staff Rose Tyler has provided the below CSS code to align the quantity and add to cart button to the left:
```
/* set align left for form.cart */
body .single-product-builder form.cart {
    align-content: flex-start;
}
/* set quantity even more left aligned if needed */
body .et_product-block .cart span.dir-column~.quantity {
    margin-inline-end: auto;
}
```
https://prnt.sc/t_xuU1QWTe8_

But the left align should only apply on desktop, while it should be kept as centered in tablet & mobile view. Now it is way over the left. Pls see attached: https://drive.google.com/file/d/1Wc3yOKKsf-tSdlRXRPzwNMvqEOdzmET4/view?usp=share_link

Thank you
#356754 Copied Theme version: 9.0.5
2 Answers
Rose Tyler

Support staff

May 15, 2023 at 16:11
Hello Kris,

Thank you for contacting us and for using XStore.

Please change this code https://prnt.sc/G3QcIXGBdaqL to
```
@media only screen and (min-width: 768px) {
    /* set align left for form.cart */
    body .single-product-builder form.cart {
        align-content: flex-start;
    }
    /* set quantity even more left aligned if needed */
    body .et_product-block .cart span.dir-column~.quantity {
        margin-inline-end: auto;
    }
}
@media only screen and (max-width: 480px) {
    .single-product-builder .et_product-block form.cart .quantity-wrapper:before {
        position: static;
        transform: none;
        margin-inline-end: 10px;
        line-height: 2;
    }
    .single-product-builder .et_product-block form.cart .quantity-wrapper {
        max-width: unset;
    }
}
```
Kind Regards,
8theme team
#356797 Copied
Kris

Participant

May 16, 2023 at 15:11

thank you

#356906 Copied
Tagged: add to cart, aligning, issue, quantity, themes, woocommerce, wordpress
Viewing 3 results - 1 through 3 (of 3 total)

The issue related to '‘Continued: Single product page: “Add to Cart & Quantity” Aligning issue’' has been successfully resolved, and the topic is now closed for further responses

Continued: Single product page: “Add to Cart & Quantity” Aligning issue

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection