Archived topic
woocommerce grid borders
3 replies · Started by roadlink on April 17, 2021
Viewing posts 1–4 of 4
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?
/* 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;
}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;
}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;
}No problem :)
This archived topic is closed to new replies.
