Skip to content
/* === SAFE CSS masonry for Shopify cards (columns) === */
/* 1) Put columns on the actual wrapper that contains the cards:
We don't guess classnames — we target the parent of the first card using :has(> ...) */
.wp-block-shopify-collection-shopify-collection-block :is(div,section,main)
:has(> .product-card[products--index]) {
column-count: 3 !important;
column-gap: 16px !important;
}
/* 2) Make each card behave as a masonry tile inside columns */
.wp-block-shopify-collection-shopify-collection-block .product-card[products--index]{
display: inline-block !important;
width: 100% !important;
margin: 0 0 16px !important;
break-inside: avoid !important;
-webkit-column-break-inside: avoid !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* 3) Images: no cropping */
.wp-block-shopify-collection-shopify-collection-block .product-card__image-container{
height: auto !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
}
.wp-block-shopify-collection-shopify-collection-block .product-card__image-container img,
.wp-block-shopify-collection-shopify-collection-block img.image{
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
}
/* 4) Optional: hide title/price */
.wp-block-shopify-collection-shopify-collection-block .product-card__title,
.wp-block-shopify-collection-shopify-collection-block .product-card__price{
display: none !important;
}
/* Responsive */
@media (max-width: 767px){
.wp-block-shopify-collection-shopify-collection-block :is(div,section,main)
:has(> .product-card[products--index]) {
column-count: 2 !important;
column-gap: 12px !important;
}
.wp-block-shopify-collection-shopify-collection-block .product-card[products--index]{
margin: 0 0 12px !important;
}
}
