Dawn theme add to cart button not optimised for mobile

[Michael185]

Hi everyone, I wanted an add to cart button so I'm using


<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
<input type="hidden" min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="button"
style="margin-top:10px;
margin-left:25%;
margin-right:25%;
border-radius:10px;
"/>
<input type="hidden" name="return_to" value="back" />
</form>


in the product card liquid. It's looking fine, but on mobile it's not optimised and is all over the place in terms of formatting.

The preview theme is: https://asa7msqrwt0iyyp6-25650495566.shopifypreview.com

Not sure how to keep the button centred but would love having an add to cart button
thanks!

[DelightCart]

@Michael185 Can you please send me screenshot exactly?

[Michael185]

Hi! Sorry I didn't see a notification you'd responded!

Here's the screenshot of desktop and mobile version.

So it all looks fine on desktop but the mobile is really squeezed

[amrslama72]

Hello Michael, Im having the same problem did you reach a solution?

[Michael185]

No still haven't heard anything

[Michael185 · Accepted solution]

Currently using 

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.variants.first.id }}" />
<input type="hidden" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="button" style="margin-top: 17px" />
</form>

In the product.card.liquid 

But it directs to the add to cart page so still trying to figure out how to make it just work as a quick add/popup