Sidebar configuration

Hi there,

can you provide a link to the site? You can edit your original topic and use the Site URL field for privacy.

Unfortunately, I can not share the site (for competitive reasons)

However, I am assuming this is something that can be done via CSS? I personally have not found a way to set it up inside the theme

I can provide CSS to set the sidebar but really need to see the site so i can apply it to your requirements especially in regards to keeping it positioned. - the Site URL field is private and only the GeneratePress support team can see it. Is that an issue?

Done, please have a look

Try this:

@media (min-width: 768px) {
    .site-content {
        display: grid;
        grid-template-columns: auto 300px;
    }
    #primary, #right-sidebar {
        width: 100%;
    }
}

You can adjust the sidebar width grid-template-columns: auto 300px; the auto value is for the primary content and will just fill the space available.

Seems to work well!

One question, how can I move the sidebar down once the resolution drops below 1023px?

Cool - so using CSS Grid we could do this:

@media (min-width: 768px) {
    .site-content {
        display: grid;
        grid-template-columns: 100%;
    }
    #primary, #right-sidebar {
        width: 100%;
    }
}

@media (min-width: 1023px) {
    .site-content {
        display: grid;
        grid-template-columns: auto 320px;
    }
    #right-sidebar {
        padding-right: 20px;
    }
}

Thank you, David!

You're welcome

Hi David, I noticed that around 1039px, the sidebar starts to get cut off. Why is that?

Which browser are you seeing this in ? I tested in Chrome, FF and Safari and not seeing this happen. The sidebar does touch the edge of the screen though.

I am using the latest version of Chrome

Maybe we can set a margin to address it?

I edited the code above which adds 20px padding to keep it off the edge of the screen. And increased the sidebar width to 320px to offset the padding.

Does not seem to help, the sidebar border starts to stick to the edge of the screen in about 1050px