add to cart button issue

[momsabhiruchi]

hello everyone! I have customized my add to cart button (based on customer requirement) in collection pages using custom css code as below :

.button {
background-color: #6a0d2e;
color: white;
margin-top: -140px;
}
.button:hover {
background-color: #f8f4f0;
color: #6a0d2e;
border-color: #f8f4f0;
}

All my images are of same size(800*800). But the issue is that, for some products the button is appearing perfectly and we are able to see the product title and prices clearly, where as for some products , the add to cart button is hiding the product title cimpletely or partially. kindly help me solving this issue. (in both desktop and mobile version).

Thanks in advance. lookinf forward for the solution

here is a link for my website:

https://moortikar.myshopify.com/collections/under-999?page=2

password: rtebra

[exertweb · Accepted solution]

@momsabhiruchi 

Please add below code.

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before </body> tag

<style>
.product-card-wrapper .card__content {
position: relative;
}

.product-card-wrapper .card__content .quick-add {
position: absolute;
grid-row-start: auto;
left: 0;
top: -48px;
width: 100%;
}

.product-card-wrapper .card__content .quick-add .button {
margin: 0 0 0 !important;
}
</style>

[exertweb · Accepted solution]

@momsabhiruchi 

Please add below code.

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before </body> tag

<style>
.product-card-wrapper .card__content {
position: relative;
}

.product-card-wrapper .card__content .quick-add {
position: absolute;
grid-row-start: auto;
left: 0;
top: -48px;
width: 100%;
}

.product-card-wrapper .card__content .quick-add .button {
margin: 0 0 0 !important;
}
</style>

[momsabhiruchi]

Thank you so much exertweb for a quick help. This worked very well. But now my products images are not clickable.

Can u please help me out with this. Also, if possible can u please help me out in achieving hover effect on the product. As , when we hover over the product image, the "add to cart" button should appear. Thank you

[exertweb]

@momsabhiruchiThe issue with clickable images using CSS hasn’t been resolved. Could you please share your store details?

[momsabhiruchi]

my store details 

https://moortikar.myshopify.com/collections/all

password: rtebra

[exertweb]

@momsabhiruchi I mean shopify admin detail.

[momsabhiruchi]

Thanks you for the quick response. but as of now  my client has agreed upon unclickable image. can u please guide me if it is possible to align buy it now button with quantity selector. i have a dawn latest theme. 

[exertweb · Accepted solution]

@momsabhiruchi Please add below css.

.product__info-container .product-form {
    margin-top: -62px;
    padding-left: 150px;
}
.product__info-container .product-form .shopify-payment-button {
    margin-left: -148px;
}

[momsabhiruchi]

Thank you very much for continuous support....

[momsabhiruchi]

Hi Exertweb, as yesterday i said, after adding code to the placement on add to cart button on the collection pages, my product images became unclickable, similarly even my collection images have become unclickable. can u please help me.