Site logo

Archived topic

Changing content / sidebar breakpoint

5 replies · Started by Baz on December 8, 2020

Viewing posts 1–6 of 6

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).

Hi there,

Are you using the Flex structure of the theme?

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

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/

Worked perfectly. Thank you Leo :)

No problem :)

This archived topic is closed to new replies.