Change right sidebar breakpoint

I tried everything I could find and nothing worked.

Hi there,

This is possible with some simple CSS if you are using the Flex structure.

Any chance you can make that change first?

Thanks.

I haven't switched to flexbox because I had some problems. Isn't it possible with the current structure?

Unfortunately not. I would have to manually make the site-content container flex and that's basically the same as using the flex structure in the customizer.

What issue did you have when switching to Flex?

I ll try to switch and I ll tell you if I have any problems...

Sounds good :)

Can you still provide me the solution in case everything is fine when I change?

I did change to flexbox and everything seems fine. Can you provide me with the fix now?

Hi Jim,

You can try Leo's CSS suggestion here:
https://generatepress.com/forums/topic/changing-content-sidebar-breakpoint/#post-1572183

Change the @media rule's max-width value from 960px to your preference (1000px)

it doesn't seem to work. It's the same. I have the CSS applied to 1000px. You can check if you want.
https://www.prodreaminvestor.com/paid-focus-groups/

And yeah I cleared all my caches and checked from different browsers.

This css I have seems to conflict with the CSS you gave me.

/* FIXED SIDEBAR WIDTH 300PX */
@media (min-width: 769px) {
#right-sidebar {
width: 320px;
}

.inside-right-sidebar {
padding-right: 20px;
}

body:not(.no-sidebar) #primary {
width: calc(100% - 320px);
}
}

How can I make them both work?

This line causes the problem to be exact
body:not(.no-sidebar) #primary {
width: calc(100% - 320px);
}

You can keep that CSS but change its @media max-width to 1001px.

and use this one instead of the Leo's CSS from the link.

@media (max-width: 1000px) {
    .site-content {
        flex-direction: column;
    }
    #right-sidebar {
        width: 100%;
    }
        
    .inside-right-sidebar {
        padding-right: 20px;
    }
        
    body:not(.no-sidebar) #primary {
        width: 100%;
    }

}

Leo CSS works fine now but yours has extra space on the right side of the main content... Any ideas why?

Look: https://ibb.co/VTF0dMx

This happens only from 769px to 1000px or something. weird...

Can you provide a screenshot of this extra space? To be sure if we're seeing the same thing.

If you're pertaining to this - https://share.getcloudapp.com/Kou7gkQ8 - that's from the separation margin when you're using separate container.

We can remove right side by adding this CSS inside the @media (max-width:1000px) rule:

main#main {
    width: 100%;
}