Product Grid with 0 Product Card Gap - Border Overlap Issue

chenski999
Visitor
2 0 0

On my product homepage's product grid, I use custom CSS to set the horizontal and vertical gap between product cards to zero.

However, this creates the issue of two neighbouring borders overlapping magnifying the thickness of a shared border. (see first picture)

Screenshot 2024-05-03 at 04.22.09.png


How can I avoid this? Is there a better way to achieve a cleaner look (all borders with the same thickness) ?
(see second picture) 

Screenshot 2024-05-03 at 04.23.22.png

Thank you in advance, for all your help!


Replies 2 (2)

SAN_MSWEB
Shopify Expert
1173 139 147

Hello,

 

Hope you are doing well.

 

I am San from MS Web Designer.

 

Kindly share the storer URL so that we can assist you.

 

Do let me know in case of any concerns.

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

BSSCommerce-HDL
Shopify Expert
779 252 265

Hi Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency