change breakpoint for sidebar

Hi,

Sorry for the delay on this.

Try adding this CSS to “Customizer – Additional CSS” …

@media screen and (max-width: 799px) {
#content-wrapper>#content,
#content-wrapper>#sidebar {
    width: auto;
}
}

Oliver

hi, thanks for your response. Your code does not work…

I tried with

@media screen and (max-width: 1099px) {
content-wrapper > #sidebar {width: 100%;}
content-wrapper > #content {width: 100%;
}

but that didn’t work, too.
Maybe I forgot to mention that on mobile device it’s working well. The sidebar is under the content.

But on desktop when decreasing the size of the browser window nothing happens until when I get maybe 480px – then the sidebar jumps under the content.

Sorry, forgot to add the display: block; for the wrapper, try this instead (tested and working) …

@media screen and (max-width: 799px) {
	#content-wrapper>#content,
	#content-wrapper>#sidebar {
		width: auto;
	}
	#content-wrapper {
		display: block;
	}
}

If this doesn’t work for you then please provide a link to your site so we can inspect what’s going on. Thanks.

that’s also not working. Only the sidebar disappears but the content is not expanding to the whole width. As I’m working on the page it is not yet online and only visible for logged in users. How can I give you a login?

I’m afraid you cannot give me a login as that goes against forum guidelines.

Are you using a child theme? We’ve used the CSS above on the unmodified parent theme active with the sidebar enabled everywhere with only Options for Twenty Twenty-One plug-in active and it definitely does what you require (increases the sidebar breakpoint to 800px).

Try to replicate that environment and then you will be able to see what is different on your site which will help to discover why it’s not working for you.

Oliver

Marking this as resolved now.