While resizing shop side bar with CSS, widgets also getting resized


I’m using Tyche Theme for my shop.

When I used the CSS to resize the shop side bar, my front page widget also getting resized and forming blank space on its right.

I want to resize only the shop side bar, not anything else.

Please assist to fix this.

/Sidebar width/
@media (min-width: 992px)
{.col-md-4 {
width: 20%;
@media (min-width: 992px)
{.col-md-8 {
width: 80%;

Thanks in advance,

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it?

Best Regards,

Thank you for your quick reply.

Please have a look to

Please have a look on the widgets. ( MOST SELECTED / DECORATION LIGHTS / ON SALE ).


Hi Praveen

There is no sidebar on that section, there is only 3 columns with col-md-4 class and since you change the width to 20% you are getting a mess on the page, I’m not sure what you want to achieve, there is no sidebar here you mentioned… please add some more details


Side bar I want to resize is located in SHOP page.

So when i used the CSS to achieve it, that particular widget is also getting effected along with my shop sidebar.

(When i remove the CSS , That white blank space is removed and looks perfect. )

Can i resize my shop page sidebar without effecting this widget.

i guess i am clear now.

what about this:

@media (min-width: 768px){
.woocommerce .tyche-has-sidebar ul.products li.product, .woocommerce .tyche-has-sidebar ul.products li.product {
width: 21% !important;

Sorry. thats not working.

On Shop Page, Its changing the Products width and not the sidebar width.

Well, in this case, sorry but this will require much more than we can offer under the free support scope :frowning: