How to change the width of the sidebar

Hello victorb70,

You can increase the width of the main content, instaed of decreasing the width of sidebar. Please apply the below given css into your style file-

.page-template-default #primary {
width: 83.287% !important;
}

I hope the above was helpful.

Kind regards,

Manoj

Hi victorb70,

Please add (and adjust) the following CSS:

#primary {
	width: 71.287%;
}

#secondary {
	width: 23.762%;
}

The total width (primary + secondary) must not exceed 100% so if you want (for example) secondary to exceed 28.713% you’ll need to decrease the width of primary.

Thanks for the help, but both of these options messed up the in formation displayed in right side bar.

I am not sure, but it seems like the theme is failing to adjust in accordance with the screen size. I am currently working on 24 inch monitor. On this monitor, the right side bar is actually as wide the main page the main page. If I increase the primary page width to 83.287% it slams the ad bar in the right sidebar up against the vertical divider line, which looks bad. If I go over 83.287% it actually pushes all the information in the right sidebar out the bottom, even though there is a good six inches of blank space for it to move over to the right. What is confusing is that on my 24″ screen there is a good six inches of blank white space on both the right and left side, but the overall width of the page refuses expand to fit the screen size and just takes up about 60% of the total screen real estate in the middle of the screen

It is just a guess, but I think the content management system of the theme is not adjusting the size of the page correctly when it encounters a larger desktop screen. Again that is just a guess.

• This reply was modified 6 years, 5 months ago by victorb70.
• This reply was modified 6 years, 5 months ago by victorb70.
• This reply was modified 6 years, 5 months ago by victorb70.

Hi, perhaps try removing the rules suggested so far and adding:

body.responsive.layout-full #page-wrapper .full-container {
	max-width: none !important;
}

That’ll make the site full-width. Or you can add something like this:

body.responsive.layout-full #page-wrapper .full-container {
	max-width: 95% !important;
}