A user is experiencing an issue where product card borders on their collection page appear thicker where cards meet, creating a doubled border effect. They want the borders to overlap to maintain consistent thickness throughout.
Attempted Solutions:
Suggested Fixes:
.product-grid .grid__item with margin-right: calc(var(--product-card-border-width) * -1).card elements using border-right: unset and border-left: unset in Custom CSSCurrent Status:
The issue remains unresolved. The user reported that Dan’s solution created visible gaps between products. They’re seeking clarification on where to implement Tim’s code and alternative solutions.
Hey there, I want the boarders around my product cards to overlap so I don’t get this thicker line in the middle where they both sit next to eachother. The first photo shows how they sit next to eachother, but I would like them to overlap so the entire thing has the same thickness all around. I have set the column gap and row gap to 0 by code. Unsure if I can do a negative gap I couldnt get it to work.
https://7e769e-70.myshopify.com/
pass: jake
You can instead set negative margin, like this:
.product-grid .grid__item {
margin-right: calc( -1 * var(--product-card-border-width));
}
Hi @jakethagun
You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings and check
.grid__item:nth-child(even) .card {
border-right: unset;
border-left: unset;
}
Hey Tim, where do I paste this? Cant i put it in the base.css but it just made a gap between the products.
Hey Dan, unfortunetly this leaves gaps that can be seen. Any other solution?
