Why is my 'add to cart' button causing content overlap?

[Bella_Lenses]

Hi!

I added "add to cart" button with products on home page. I added the following code in card-product.liquid

 <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ card_product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
  </form>

Now content of cart is overlapping as follows. 

Any help will be appreciated.

[Moeed]

Hey @Bella_Lenses 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[Bella_Lenses]

My store URL is https://87b913-2.myshopify.com/ and password is 12345

[Moeed]

Hey @Bella_Lenses 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card__information {
    padding-bottom: 0 !important;
}
form {
    margin-top: -15px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Bella_Lenses]

Really apologize, I am not allowed to share the store login information at this time. 

[Dan-From-Ryviu · Accepted solution]

Hi @Bella_Lenses 

Your theme has quick add by default, please enable it from Online store > Themes > Customize > Collections > Default collections > Product grid > precheck b

[Bella_Lenses]

Yes tried it as you said but not showing "Add to Cart" button.

[Dan-From-Ryviu]

If you want to make it appear like the custom code you added, please add the code, give me password protected of your store so I can provide the code to solve the overlap issue

[Bella_Lenses]

Thank you for your prompt reply. Yes already shared above.

[Dan-From-Ryviu]

Hi @Bella_Lenses 

I saw you already solve the issue.

[Bella_Lenses]

I apologize, I am not allowed to share the store login information at this time. 

[PageFly-Noah]

Hi @Bella_Lenses 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.product-grid li {
    padding-bottom: 20px;
}
.product-grid li form {
    margin-top: -15px;
}

</style>

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[Bella_Lenses]

The problem is solved now. There is an option to add the button on home page, featured products.