Archived topic
Fixed Sidebar Width
6 replies · Started by Neal on September 15, 2021
Hi there. Would someone be able to help me with sorting out a fixed width sidebar?
I need for my content to remain at 670px and the sidebar fixed at 300px until it disappears entirely on screen sizes of 1023px or less.
I have tried these two solutions but the sidebar always ends up resizing as I make the screen smaller.
https://generatepress.com/forums/topic/sidebar-width-to-300px/
https://docs.generatepress.com/article/sidebar-widths/#fixed-width
Thanks for any help.
Hi Neal,
Can you add the CSS in the documentation first?
I'm not seeing it added currently.
Thanks :)
Sorry! It's added now, i'm not sure if it might take a sec for it to show.
Thanks again.
I have now managed to get the sidebar to stay at 300px wide using this code that I found in another post on here.
@media (min-width: 769px) {
#right-sidebar {
width: 330px;
}
.right-sidebar #primary {
width: calc(100% - 330px);
}
}
@media (max-width: 768px) {
#right-sidebar {
display: none;
}
}But unfortunately the sidebar doesn't disappear until the screen is around 750px wide. So it takes up half the screen at this point!
How do I now set it up so that the sidebar will disappear at around 1000px or less?
I tried changing the max width value to higher. It disappears sooner but just leaves an ugly grey box as the main content doesn't resize to fill the gap.
Hi Neal,
You can change the CSS @media for right-sidebar with display:none; to 1000px instead of 768px AND then set the main#main's width to 100%.
Example:
@media (max-width:1000px){
#right-sidebar {
display: none;
}
.right-sidebar #primary {
width: 100%;
}
}Fantastic, thank you!
No problem. glad to be of any help. :D
