Hi!
As the title suggests, I have aligned my “Add to Cart” button with the “Quantity Selector” by adding the following piece of code to theme.liquid:
{% if template contains 'product' -%}
<style>
@media screen and (min-width: 767px) {
.product-form__input.product-form__quantity {
float: left !important;
margin-right: 2rem !important;
}
.product__info-container .product-form {
margin: 5.5rem 0 !important;
}
product-form.product-form {
display: flow-root !important;
}
}
This caused quite some white space to emerge below the elements (see image). Any suggestions on how I can reduce this white space?
As a bonus question I’d also like to remove the header associated with the quantity selector (“Aantal”). Any suggestions on how to do this as well?
Best regards,
Roekudoo
Hi @roekudoo
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.
Thanks for the quick reply! The details are as follows:
Hi @roekudoo
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
Hope this answer helps.
Best regards,
Victor | PageFly
Hi @roekudoo
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css
@media screen and (min-width: 767px){
.product__info-container .product-form {
margin-bottom: 0!Important;
}
}
This worked! Awesome, thank you
Unfortunately this did not work. The answer given by PageFly-Victor did though. Thanks for your help nevertheless :).
Could you please tell me how you managed to get the quantity selector? I am also using Dawn and selected ‘Enable quick add’, so I only have the ‘Add to cart’ button.
