Hey @rtqc,
you’ll also need to change the width of the .content element, so that it and the sidebar sum up to 100%; also, please note that these widths vary across @media breakpoints, also inside the main style.css file.
Thread Starter
rtqc
(@rtqc)
Thank you for responding.
I had tried that prior to writing my question and I should have included my findings because it didn’t work. I am trying to make the content area 68.5% and the sidebar 31.5% but as soon as I add .contentat anything other than 100% my full width pages with no sidebar end up at whatever percentage I put for the .content element.
There must be some other element that defines the content area when a sidebar is present and I can’t seem to figure it out.
Thanks again.
Thread Starter
rtqc
(@rtqc)
The original sidebar width is 30% so the change I want is minimal. I’m hoping it won’t effect any @media breakpoint settings.
Does this CSS make sense?
.content {width:100%;}
.has-sidebar .content {width:68.5%;}
.sidebar {width:31.5%;}
It seems to work but I’m not sure if I’m breaking something by using it.
Thanks again.
The code is fine, just be sure to check that everything works as expected on smaller screens 😉
Thread Starter
rtqc
(@rtqc)
Thank you. I did have to adjust the @media and it seems to be working as I hoped.
It’s my first time coding for media but for anyone who may need it this is what I used.
@media only screen and (max-width: 600px) {
.content, .has-sidebar .content,
.sidebar {
width: 100%;
float: none;
padding: 0;
}
Thanks for sharing, @rtqc, much appreciated!
