- This topic has 3 replies, 2 voices, and was last updated 4 years, 11 months ago by
.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Posts
-
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; }Customer Support
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/11mkz2jBut in category pages and mobile looks a bit broken.
category: https://prnt.sc/11ml2c0
Mobile : https://prnt.sc/11ml6j8Here 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 🙂
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.
