A user encountered an issue where collection cards became unclickable after applying CSS code to remove bottom padding. The original code used display: none !important on .collection-list-wrapper .card__content, which prevented interaction with the cards.
Solution provided:
margin-bottom: -50px !importantmargin-bottom: -56px !important to completely eliminate spacingOutcome:
The issue was resolved. The collection cards are now clickable with zero bottom padding between them. The solution uses a mobile-specific media query (max-width: 768px) and targets the specific card elements without hiding interactive components.
Hi there,
I managed to remove the bottom padding under a collection card, but when I do this, I can no longer click on the collection card. This is the code I used, but it causes the card to become unclickable. If I remove the code and leave the bottom padding, I can click on the card just fine.
This is the code I used:
.collection-list-wrapper .card__content{
display: none !important;
}
You can follow the instruction here :
Go to Shopify > Online store > theme > customize
Click to Settings > Custom CSS > Paste this code to the section and save.https://prnt.sc/Rl66N9K_Bjvs
@media screen and (max-width: 768px){
.collection-list-wrapper.page-width slider-component.slider-mobile-gutter .card.card--standard.card--media {
margin-bottom: -50px !important;
}
}
Result:
Best regards,
Esther
Thanks for the fast response!
I still see a little space between the cards but its clickable! Do you also have a code that remove the whole padding. Just zero
you can change the px on the code above, from -50px to -56px : margin-bottom: -50px !important; to margin-bottom: -56px !important;
Esther
It worked!! Thankyou
