Hi there,
On mobile, when I click on a product image, the add to cart button shows up over the card. Is this common, and is there a way to fix this?
Thanks!
Topic summary
A mobile layout issue was reported where clicking on product images in a collection page caused the “add to cart” button to incorrectly overlay the product card.
Problem Details:
- Occurred on mobile devices using the Refresh theme
- Button appeared over the card instead of in its proper position
- Screenshot provided showing the visual glitch
Solution Provided:
- Custom CSS code was shared to hide the quick-add button on hover for mobile screens (max-width: 749px)
- Code targets the specific product grid section and disables the hover display behavior
Resolution:
- Original poster confirmed the fix worked after making slight tweaks to the provided code
- Issue appears to be resolved
Hi @INFRA
let add this custom css code:
@media screen and (max-width: 749px) {
#shopify-section-template--18349838893244__product-grid .grid__item:hover .quick-add {
display: none;
}
}
thank you, I tweaked the code slightly and it worked 
Thank you for your response. If it’s helpful, let accept it as the solution. Thanks again