Hi,
For double sidebars layout, the breakpoint is less than 1280px screen width when it gets to the bottom of the main content and for single sidebar, it is less than 1024px screen width.
You would need CSS to change it but then it would shrink the main content too much for small screens.
For you second question, if you mean for header block, then you can use max-width on the columns so it won’t expand too much (Appearance > Customize > Additional CSS):
.header-block-1 .pb-pattern-cols {
max-width: 1100px;
margin: 0 auto;
}
Thank you for your reply. .
What if one sidebar stayed there and the other got pushed underneath? It’s okay if the main content here smaller.
For double sidebars, you can use the following CSS code below.
In this code 1100px is the screen-width, you can values like 1000px or 1200px (increase or decrease it).
@media screen and (min-width: 1100px) {
body.double-sidebar .pb-content-sidebar {
flex-wrap: nowrap;
}
body.double-sidebar .pb-content-sidebar::after {
content: none;
}
body.double-sidebar .c-sidebar-left {
order: -1;
margin-left: 0;
margin-right: 25px;
}
body.double-sidebar .c-sidebar-right {
order: 1;
margin-left: 25px;
margin-right: 0;
}
body.double-sidebar .c-sidebar {
min-width: 260px;
}
body.double-sidebar .site-main {
padding-left: 29px;
padding-right: 29px;
}
body.double-sidebar .entry-content .alignfull,
body.double-sidebar .entry-content .alignwide {
margin-left: -30px;
width: calc(100% + 60px);
max-width: calc(100% + 60px);
}
}
For just one sidebar to appear, it will require significant CSS to do that.
Thank you. It worked when I set it to 900
I thought I would amend the sidebar width to 200 from 260 to allow 120px more for the main body but the main body didn’t widen. Do I need to add a separate code for that?
It looks ok to me, it does get widen. Your CSS would apply to 900px to 1280px screen width, you can check how the CSS code is written for small to large screen-sizes for double sidebar layout in style.css file to override it.
In your CSS, you can change this 200px to 150px:
@media screen and (min-width: 900px) {
body.double-sidebar .c-sidebar {
min-width: 150px;
}
}
Also, you can try single sidebar layout, if you remove all widgets from any one of the sidebar, it won’t appear. So, you can keep widgets only in one sidebar.
