Reduce the size of the sidebar

Hello hellofriend,

Please pass the site url so i can pass you custom css as per the need.

Kind regards,

Manoj

Hey
Add the following custom CSS to customize-> Additional CSS

@media (min-width: 1024px){
.pique-sidebar .widget-area {
float: left;
width: 28%;
}
}

Hope it helps and let me know if you require any further assistance.

• This reply was modified 7 years, 8 months ago by Poonam Namdev.

@phpexpert21 Site url is https://www.galmi.org/departments/

@poonam9 thank you I added the custom CSS, however this seems to only affect the image in the widget area rather than actually reducing the large amount of space to the left of the page.

Hello,
In my code I have told you to put float:left; but you added float:right; this is the main reason of that space.
Try to put float:left; and then check.

Let us know if you need help with anything else!

• This reply was modified 7 years, 8 months ago by Poonam Namdev.

I put in float:left; and there still seems to be no reduction in sidebar size. Does the main body of the page need to be increased in width?

Sidebar width has been reduced now it is the time of increase the width of main area.
Use the below CSS

@media (min-width: 1024px){
.site-content .content-area {
width:75%;
}
.pique-sidebar .widget-area {
float: left;
width: 25%;
}
}

That works thank you, however there is now a white band down the left of my home page. Is there any way to avoid the above CSS affecting the home page main area?

Remove the previous provided code and use the below code and it will solve all problems

@media (min-width: 1024px){
.pique-sidebar .content-area {
width:75%;
}
.pique-sidebar .widget-area {
float: left;
width: 25%;
}
}

Hope it helps and let me know if you require any further assistance.

If we target .site-content .content-area we’ll get that empty space on the home page – but we can avoid that by ignoring certain pages like the home page and the full width page:

@media (min-width: 1024px) {
    body:not(.home) .site-content .content-area,
    body:not(.page-template-template-full-width) .site-content content-area {
        width: 75%;
    }
    .pique-sidebar .widget-area {
        float: left;
        width: 25%;
    }
}

This way, the only pages with a narrower content area should be the ones with a sidebar ??