Hi experts,
How do I remove the padding from the media only on the product card without affecting the text, etc? I still want to maintain the card border radius.
anteck.com.au
TIA. Nick
Topic summary
Removing padding around the product card’s media (without affecting text) while keeping the card’s border radius in a Shopify Enterprise theme.
Proposed solutions:
- Edit assets/base.css to set a small, adjustable overall card padding: product-card.card.card–product { padding: 5px; }. Simple, but affects the whole card, not media-only.
- Add Custom CSS to remove visual spacing around the media only:
product-card { overflow: hidden; }
product-card .card__media { margin: calc(-4 * var(–space-unit)); z-index: revert-layer; margin-bottom: 0; }. - Add Custom CSS scoped to the main products grid to remove card padding while preserving text spacing:
.main-products-grid__results .card–product-contained { padding: 0 !important; overflow: hidden; }
.main-products-grid__results .card__info-container { padding-left/right/bottom: calc(4 * var(–space-unit)); }.
Screenshots were shared to demonstrate expected results. No confirmation from the original poster yet; outcome unresolved.
@Nick_S2 please add this css to the very end of your base.css file and check, have very slight padding, you can edit number 5 as per your need.
shopify admin->online store->themes->edit theme code->assets->base.css
product-card.card.card--product {padding: 5px;}
I’d suggest this code in the “Custom CSS”:
product-card {
overflow: hidden;
}
product-card .card__media {
margin: calc(-4 * var(--space-unit));
z-index: revert-layer;
margin-bottom:0;
}
1 Like
Please add this code to Custom CSS in theme settings.
.main-products-grid__results .card--product-contained {
padding: 0 !important;
overflow: hidden;
}
.main-products-grid__results .card__info-container {
padding-left: calc(4 * var(--space-unit));
padding-right: calc(4 * var(--space-unit));
padding-bottom: calc(4 * var(--space-unit));
}
Best regards,
Dan from Ryviu: Product Reviews App
@tim_1 perfect. Worked well. Thanks mate
1 Like