Hi Melanie,

Thank you for your message.

You can increase the content sidebar width by copy/paste the following CSS code to Appearance -> Customize -> Additional CSS:

/* increase content sidebar width */
@media (min-width: 992px) {
    .content-area .content {
        width: 72%;
    }
    .content-area .content + .col-md-3 {
        width: 28%;
    }
}

The width in above CSS is already increased by 3% based on the default width. If you would like to increase it some more you can lower the 72% value and increase the 28% value.

Hope this helps, let me know if you have any questions.

Hi Melanie,

I see, the CSS I provided earlier doesn't fully work. My apologies.

Could you replace the previous CSS with the following one:

/* increase content sidebar width */
@media (min-width: 992px) {
    body:not(.sidebar-hide) .content-area .content {
        width: 72%;
    }
    body:not(.sidebar-hide) .content-area .content + .col-md-3 {
        width: 28%;
    }
}

This one will only target the pages where there is a sidebar visible. Pages without sidebar will be skipped.

Changing the sidebar width for specific pages will be possible with some custom CSS but you need to add each page to the CSS code specifically. It's not really good dynamic solutions for the long run. If the above CSS codes fixes the problem I recommend to use that one instead.

If you do want to change the sidebar width on specific pages just let me know which pages and I'll provide you with a CSS code snippet.

I definitely agree a setting for this makes it a lot easier for users. I'll put it on the list, thank you for the suggestion