Reducing the size of sidebar

This topic has 6 replies, 2 voices, and was last updated 8 years by sharmstr.

Author
December 17, 2015 at 00:47 #93741

lillyleitz
Participant

Hi,

How should I reduce the width of sidebar particularly in Shop page. I want the main content to be more than 75% as set in Theme options> Layout settings.

Many thanks.
December 17, 2015 at 02:30 #93774

sharmstr
Moderator
Try this in your quick css (assuming your have a right sidebar since you didnt say)
COPY CODE
```
@media (min-width: 768px) {
.woocommerce-page .template-page.col-sm-9.tpl-right {
width:85%;
}
.woocommerce-page .sidebar.sidebar-main.col-sm-3.sidebar-right {
    width: 15%;
}
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
December 17, 2015 at 02:30 #93775

sharmstr
Moderator

forgot to say…

change the percentages to suit.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

December 17, 2015 at 13:50 #93817

lillyleitz
Participant

Thanks for replying but it changed nothing.
December 17, 2015 at 14:40 #93826

sharmstr
Moderator
Because you’re using a left side bar. Here’s the code for that. Sorry
COPY CODE
```
@media (min-width: 768px) {
    .woocommerce-page .sidebar.sidebar-main.col-sm-3.sidebar-left.col-sm-pull-9 {
        width: 15%;
    }
    .woocommerce-page .template-page.col-sm-9.col-sm-push-3.tpl-left {
        width: 85%;
    }
    .woocommerce-page .template-page.col-sm-push-3 {
        left: calc(15% - 1px);
    }
    .woocommerce-page .col-sm-pull-9 {
        right:85%;
    }
    .woocommerce-page .sidebar .search-field {
        width: 160px;
    }
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
December 17, 2015 at 22:49 #93965

lillyleitz
Participant

Thank you so much for your help, it did shrink the sidebar but there is still space on its left side, is there a way to remove it? Your assistance is much appreciated.

Thanks for your time, Sharmstr.

December 18, 2015 at 02:07 #93988

sharmstr
Moderator

Are you saying you want the page to be full-width regardless of the screen size?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘General questions’ is closed to new topics and replies.

Search KB

Log in with your credentials

Forgot your details?