Archived topic
Change layout breakout from 768px to 980px
7 replies · Started by Deepak on September 8, 2020
Hello Team,
Currently by default the theme layout is set to change at 768px when both sidebars move below primary section.
Is it possible to either
1. Set break point for 980px when only right sidebar goes below primary content and the main screen only contains left sidebar+primary content and at 768px left sidebar goes down the primary content for mobile devices
OR
2. Move both sidebars to bottom at 980px instead of 768px
I would prefer option 1 if possible. Can you please help me with the custom CSS required for this approach.
I tried Menu plus element but it seems like it is only able to set the break point for MENU which I feel wrong, ideally we should give this option to end user so he/she can set a break point based on their requirement for entire website layout and not only for the MENU?
Regards
Deepak
Hi there,
try this CSS:
@media(max-width: 980px) and (min-width: 768px) {
.site-content {
flex-wrap: wrap;
}
.site-content .content-area {
width: 75%;
}
#left-sidebar {
width: 25%;
}
#right-sidebar {
width: 100%;
}
}Thanks David.
It worked perfectly.
You're welcome
Hello David,
Recently I switched my sticky sidebar from right to left so now my left sidebar is sticky.
Can you please help me with the CSS with the same requirement but now the left sidebar should go below the primary content and the screen should contain right sidebar+main content
I tried to change the sidebar value in the provides css from left to right but it didn't worked properly as instead of going down, the left sidebar content went above the main content.
Thanks again
Regards
Deepak
Hi there,
Does this do it?:
@media(max-width: 985px) and (min-width: 768px) {
.site-content {
flex-wrap: wrap;
}
.site-content .content-area {
width: 75%;
}
#right-sidebar {
width: 25%;
order: -10;
}
#left-sidebar {
width: 100%;
order: 10;
}
}Hi Tom,
Yes it worked, although I see the right sidebar comes to the left side at the provided width which also works for me
So all good
Thanks
Can you please confirm though if the left sidebar sticky issue is fixed with GP 3.0 and it will remain the way it is as it was not working with 2.X?
It wasn't an intentional thing we did, but perhaps changing to flexbox from floats fixed it. Nothing should change in 3.0 between now and the official release :)
