Archived topic
Is this the correct CSS for changing the width of the sidebar and content?
5 replies · Started by Radu on November 24, 2018
Hello!
I have some CSS knowledge, but I'm not an expert, so I want to make sure that I added the correct code for this.
I wanted to make the width of the sidebar to be 300px without affecting the responsiveness of the blog.
So, I had to do it in percentages. I added this:
.sidebar.grid-30 {width:27.27272727272727%;}
.content-area.grid-70 {width:72.72727272727273%;}The container's layout is 1100px.
It worked fine on desktop, but affected the way the blog looks on mobile because the primary area and sidebar were sticking to those values. They weren't stretching the whole width anymore.
So, I added this to fix it on mobiles:
@media only screen and (max-width: 768px) {
.content-area, .sidebar{width:100% !important;}
}Everything looks ok now on both desktop and mobile, but you never know what things might break somewhere, and I don't want to notice it after publishing the blog and start tweaking again.
So, is that code in order?
Thanks!
Best wishes,
Radu
Hi there,
Are you wanting a fixed width sidebar?
If so it's really possible to make it responsive as well.
See Tom's note here: https://generatepress.com/forums/topic/fixed-width-in-sidebar/
Hello!
Thanks for your reply!
I want the sidebar to have the equal of 300px width on desktop.
Apparently, I got what I wanted, but I just wanted to make sure that the code is correct and won't cause issues somewhere that I can't notice or think of right now.
So, I got a 300px width sidebar (for desktop), but without using px; I used percentages.
.sidebar.grid-30 {width:27.27272727272727%;}
.content-area.grid-70 {width:72.72727272727273%;}27.27272727272727% out of 1100px basically equals 300px.
But, of course, this happens on mobiles when I do that:
So, in order to fix that and make the content go back to 100% width on mobiles, like it's supposed to, because I don't need a 300px (27.27272727272727%) worth of sidebar width there, I added this code:
@media only screen and (max-width: 768px) {
.content-area, .sidebar{width:100% !important;}
}And everything's back to normal on mobiles.
So, I got what I wanted, but I just want to make sure the method is ok and won't affect something else that I can't spot.
I'm stressing about that sidebar size because it's a standard ad size. Otherwise, I would have gladly used the Spacing feature and be done with it.
Thanks!
It's CSS so hard to judge if something is "correct".
I'd test with as many devices as possible.
Got it!
I'll just do some extensive testing then.
Thanks!
No problem :)
