Product Grid with 0 Product Card Gap - Border Overlap Issue

chenski999 · ‎05-02-2024

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)

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

Thank you in advance, for all your help!

INA_MSWEB · ‎05-03-2024

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 · ‎05-03-2024

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.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Product Grid with 0 Product Card Gap - Border Overlap Issue

Product Grid with 0 Product Card Gap - Border Overlap Issue

Community Blog Articles