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 1 years, 9 months 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