- This topic has 7 replies, 3 voices, and was last updated 3 years, 5 months ago by Tom.
-
AuthorPosts
-
September 8, 2020 at 10:36 pm #1436081Deepak
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 devicesOR
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
DeepakSeptember 9, 2020 at 4:06 am #1436328DavidStaffCustomer SupportHi 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%; } }
September 9, 2020 at 4:15 am #1436340DeepakThanks David.
It worked perfectly.
September 9, 2020 at 6:17 am #1436474DavidStaffCustomer SupportYou’re welcome
October 3, 2020 at 10:38 am #1470807DeepakHello 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
DeepakOctober 3, 2020 at 1:34 pm #1470921TomLead DeveloperLead DeveloperHi 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; } }
October 3, 2020 at 11:09 pm #1471179DeepakHi 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?
October 4, 2020 at 10:19 am #1471938TomLead DeveloperLead DeveloperIt 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 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.