change the sidebar width on tyche theme

Hello there,

I would like to change the width of my sidebar on the shop page, to give my products more space so it can show 4 products on a line.

please help, of how to reduce the width.
looking forward to your reply

www.supersavesports.com

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*increase sidebar with*/
#page > div > section.content-area-2 > div{
  width:100%;
}
#page > div > section.content-area-2 > div > div > div:nth-child(2){
  width:100%;
  margin: 0 auto;
}

#tyche_products-5 > div > div.col-sm-9.col-xs-12 > div > div.owl-stage-outer > div{
  width:100% !important;
}

.owl-item.active {
    width: 25% !important;
}

Best regards,
Support.

Thank you for your reply

Please have a look at this page here http://supersavesports.com/shop/

I would like to reduce the width of the sidebar (search, categories and price filter) to give my content enough space, so i can fit 4 products in a line.

i have tried your way but this made my homepage a bit messy.

please help

Hello there,

Please try using the following plugin to change the number of columns used in the page.

Here is an article with more options:

Let me know how this works.

Best Regards,
Support

Thank you for your reply
Please have a look at this page here http://supersavesports.com/shop/

i have tried the following plugin to change the number of columns used in the page.

its a good plugin, but its not allowing to change to 4 products per column because the page doesn’t have enough space as the sidebar width has taken all the space.

I need to reduce the width of my sidebar.(search, categories and price filter) to give my content enough space, so i can fit 4 products in a line.

please help

Hello there,

Thanks for telling me this.

You can use the following CSS code to change the width of the sidebar and the content by going to Appearance > Customize > Additional CSS and pasting it there.

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

@media (min-width: 992px)
.col-md-8 {
width: 80%;
}

Best Regards,
Support

Thank you for your reply

I have tried adding your code, its added but no change at all.

http://supersavesports.com/shop/

please have a look at it again, I want to change the width of my sidebar so I can have more space for my product to come 4 per line.

looking forward to your reply