[Resolved] woocommerce grid borders

[roadlink]

Hi,
I use below code to create borders in mainpage (woocommerce shortcodes) and category pages.
It is working good except middle borders are ticker than side ones.

Can you suggest a way to fix it?

https://prnt.sc/11lddiy

/* WooCommerce product grid */
@media (min-width: 769px) {
    .home .woocommerce ul.products li.product{
			width: calc(25% - 2px);
    }
}
@media (max-width: 768px) {
    .home .woocommerce ul.products li.product{
			width: calc(50% - 2px);
    }
}
.woocommerce ul.products li.product {
	border: 1px solid #ccc;
	padding: 10px;
	margin: 0px!important;
}

[Leo]

Hi there,

Typically this should be a question for WooCommerce’ support team but you can give this CSS a shot:

.woocommerce ul.products li.product {
    padding: 10px;
    margin: 0px!important;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.woocommerce ul.products li.product:last-child {
    border-right: 1px solid #000001;
}

[roadlink]

Hi Leo,

thank you for your time. It is really appreciated.

It works perfect on desktop and main page (shortcodes)
https://prnt.sc/11mkz2j

But in category pages and mobile looks a bit broken.
category: https://prnt.sc/11ml2c0
Mobile : https://prnt.sc/11ml6j8

Here is my whole CSS;

/* WooCommerce product grid */
@media (min-width: 769px) {
    .home .woocommerce ul.products li.product{
			width: calc(25% - 2px);
    }
}
@media (max-width: 768px) {
    .home .woocommerce ul.products li.product{
			width: calc(50% - 0px);
    }
}
.woocommerce ul.products li.product {
    padding: 10px;
    margin: 0px!important;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.woocommerce ul.products li.product:last-child {
    border-right: 1px solid #000001;
}

[Leo]

No problem 🙂

[Author]

Posts