[Resolved] Changing content / sidebar breakpoint

[Baz]

Hi, is it possible to change the breakpoint at which the sidebar moves below the content area (currently @768px).

I have tried searching the support forum for some CSS, but nothing seems to work. My Layout > Sidebars setting are all Content/Sidebar.

I would like the standard content/sidebar layout (below 768px) but at a higher breakpoint e.g @960px.

Hope this makes sense.

Thank you

P.S. I’m using the latest GP on local host (no other plugins).

[Leo]

Hi there,

Are you using the Flex structure of the theme?

[Baz]

Hi Leo, yes, I have the Structure set to Flexbox.

[Leo]

Try this CSS:

@media (max-width: 960px) {
    .site-content {
        flex-direction: column;
    }
    .container .site-content .content-area {
        width: auto;
    }
    .is-left-sidebar.sidebar, .is-right-sidebar.sidebar {
        width: auto;
        order: initial;
    }
    #main {
        margin-left: 0;
        margin-right: 0;
    }
    body:not(.no-sidebar) #main {
        margin-bottom: 0;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Baz]

Worked perfectly. Thank you Leo 🙂

[Leo]

No problem 🙂

[Author]

Posts