Sidebar width can it be altered

Hey there quintain,

How are you doing today?

This is definitely possible with some custom CSS. Please do not edit theme core files but rather try adding adding this custom CSS in Appearance >> Theme Options >> Custom CSS Style:

@media screen and (min-width: 1200px) {
#sidebar {
width: 310px;
margin-right: -320px;
float: right;
}

.content-two-columns {
width: 842px;
}
}

This should decrease sidebar width and increase content area. If this doesn’t work could you please post link to your site so I can take a look?

Hope this helps ??

Best regards,
Bojan

Hi Bojan

I hope you are having as good a day as my great day very much helped by your excellent code which works perfectly.

I am following your code but I cannot work out the (px) widths.

If I need to reduce the sidebar further to 250px what would be the new code AND if I wanted a different background colour for the sidebar how would I add that.

I intend to put up a child theme to take all these alterations.

BTW I am testing this theme at https://www.floodproblems.co.uk

Again thank you for your help.

Hey again quintain,

Please try replacing the code I gave you above with this one:

@media screen and (min-width: 1200px) {
#sidebar {
width: 250px;
margin-right: -260px;
float: right;
}

.content-two-columns {
width: 900px;
}
}

This should make the sidebar 250px wide and properly placed and increase the content with to fit the 100% of the reduced area.

As for the

div#content {
background: #e8e7e7;
}

Replace the color hex value to the one that you want. This should change the background color of the sidebar. You can use sites similar to this one to get hex value for the color of your choice:

https://www.color-hex.com/

Hope this helps ??

Best regards,
Bojan

Thanks again Bojan

The new widths does not work.
The colour change does.

@media screen and (min-width: 1200px) {
#sidebar {
width: 250px;
margin-right: -260px;
float: right;
}

The results can be seen at the test site https://www.floodproblems.co.uk

Hey again quintain,

From the code you posted it appears that you’re missing a closing bracket for media query.

Please try adding one more closing bracket at the end of the code and check again ??

Best regards,
Bojan

Hi Bojan

You are being very helpful and knowledgeable.

My mistake was in using a separation line by the use of:
////////////////////////////////////
This line of forward slashes completely scrambled the code following it.

I revisited your code and in-putted the following into my “Appearances-Edit CSS” and it now works.

Thank you again.
BTW do you have a donation/payment link ??

Code now in use:
/* ///////////////////// code for 310px sidebar
@media screen and (min-width: 1200px) {
#sidebar {
width: 310px;
margin-right: -320px;
float: right;
}

.content-two-columns {
width: 842px;
}
}
*/
/* ////////////////////////// code for 250px sidebar */
@media screen and (min-width: 1200px) {
#sidebar {
width: 250px;
margin-right: -260px;
float: right;
}

.content-two-columns {
width: 900px;
}
}

Hey again quintain,

Thank you for the offer and kind words but I’ll have to pass on the donation/payment.

I’m here to represent my company and just trying to help to the best of my ability.

Glad I could help! Have a great day ??

Cheers,
Bojan

Thank you for everything.
Regards
quintain