Hi,
Im not sure why this is happening but Woo Quantity and Add to cart are forced right aligned and a bit out of whack. I cant figure out what css could be causing this?
I see you’re using Elementor. And you seem to be trying to create a single product template page?
Since this is a plugin outside of GeneratePress theme, it may be best to ask Elementor’s support or refer to their documentation for this one.
But to answer your question:
If you inspect the widget, their add to cart widget seems to create a form 4 columns.
1 column for “fpf-total”, 1 column (for description?), 1 column for quantity and 1 column for the add to cart submit button.
The form itself is set to flex-wrap: nowrap;
to display all 4 columns in 1 line.
That said, these 2 extra column is what forces the quantity and button to be displayed to the right.
https://share.getcloudapp.com/X6u04ejL
This particular selector is styling it:
.woocommerce div.product.elementor form.cart.variations_form .woocommerce-variation-add-to-cart, .woocommerce div.product.elementor form.cart:not(.grouped_form):not(.variations_form) {
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
It’s from Elementor pro’s frontend.min.css
.