Hi,
I need to remove the bottom margin of the product card in the mobile view.
I have found the code I should change (see image) but I’m struggling finding the way to do it in the code. Any ideas?
Topic summary
A user seeks to remove the bottom margin from product cards specifically in mobile view.
Multiple solutions were proposed:
-
CSS class modification: One suggestion involves finding and removing the “gradient product” class in the theme.liquid file.
-
Custom CSS code: The original poster successfully resolved the issue using a media query targeting screens with max-width 767px, applying
margin-bottom: 5px !importantto.product.grid__item. -
Theme editing approach: Another response recommends accessing Online Store → Theme → Edit code and pasting specific code before the
</body>tag in the theme.liquid file.
The discussion includes screenshots showing the relevant CSS code locations, though the image content appears corrupted in the thread. The issue was marked as resolved after the custom CSS solution was implemented.
@MaBa
Find this class into the theme.liquid file gradient product
and remove .
Can you share your store URL? Then I can review it
I managed to fix with the following code:
@media screen and (max-width: 767px){
.product .grid__item {
margin-bottom: 5px !important;
}
}
Hello @spoyled
This design from the theme
You can follow these steps:
- Go to Online Store->Theme->Edit code
- Open your theme.liquid file, paste the below code before
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team