Dawn - Reduce whitespace resulting from putting "Add to Cart" and "Quantity Selector" on one line

[roekudoo]

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

[ExpertRookie]

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.

[roekudoo]

Thanks for the quick reply! The details are as follows:

• Store URL: https://air-covers-1565.myshopify.com/
• Page URL: https://air-covers-1565.myshopify.com/products/aircover-one
• Password: shopify2023

[ExpertRookie]

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;
}
}

[roekudoo]

Unfortunately this did not work. The answer given by PageFly-Victor did though. Thanks for your help nevertheless :).

[PageFly-Victor · Accepted solution]

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 </body>

<style>
@media screen and (min-width: 980px){
button.product-form__submit.button.button--full-width.button--primary {
margin-bottom: -30px !important;
}
}
</style>

Hope this answer helps.

Best regards,

Victor | PageFly

[roekudoo]

This worked! Awesome, thank you

[Natural1]

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.