/* Make product cards smaller by forcing more columns / narrower width */
/* Targets common Givecloud/ store grid classes — test and refine */
@media (min-width: 768px) { /* Desktop/tablet — adjust min-width as needed */
.product-grid, /* Possible wrapper */
.store-grid,
.grid-products,
.product-listing,
.products-container { /* Fallback broad selector */
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* 4 columns = smaller boxes; try 3, 5, or 6 */
gap: 15px !important; /* Reduce spacing between boxes */
}
.product-card, /* Individual product box/card */
.grid-item,
.store-product,
.product-item {
width: auto !important; /* Let grid control width */
max-width: 220px !important; /* Cap max size — lower for tinier boxes, e.g., 180px */
padding: 10px !important; /* Less internal padding */
margin: 0 !important;
}
.product-card img, /* Shrink oversized images if they're the culprit */
.product-image {
max-height: 150px !important; /* Or set height: 120px; object-fit: contain; */
width: 100% !important;
}
}
/* Optional: Even smaller on very wide screens */
@media (min-width: 1200px) {
.product-grid {
grid-template-columns: repeat(5, 1fr) !important;
}
}
