[Resolved] Fixed Sidebar Width

[Neal]

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.

[Leo]

Hi Neal,

Can you add the CSS in the documentation first?

I’m not seeing it added currently.

Thanks 🙂

[Neal]

Sorry! It’s added now, i’m not sure if it might take a sec for it to show.

Thanks again.

[Neal]

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.

[Elvin]

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%; 
    }
}

[Neal]

Fantastic, thank you!

[Elvin]

No problem. glad to be of any help. 😀

[Author]

Posts