- This topic has 22 replies, 5 voices, and was last updated 1 year, 4 months ago by
generatepressuser.
-
AuthorPosts
-
August 6, 2019 at 9:35 am #977324
generatepressuser
Hello,
I would like to deactivate the right sidebar when the screen is something smaller than 1100px, because the right sidebar looks not so nice when the screen is small. The sidebar by default already disappears when the screen is smaller than 768px but up from 769px the sidebar is visible and it looks not nice.
I already tried your suggestion from https://generatepress.com/forums/topic/how-to-hide-sidebar-on-mobile/ but when I use this css code, the sidebar is hidden, but it looks weird since the right side is empty.
Is it possible to make the main content (container) with a bigger width or center it, when the right sidebar is hidden?
I couldnt find an option in customizer to edit the sidebar in different screen sizes.the code now is:
@media (max-width: 1100px) {
#right-sidebar {
display: none;
}
}Best regards
August 6, 2019 at 9:46 am #977332Leo
StaffCustomer SupportHi there,
By default the sidebar is moved to below the content below
768px
.Would you prefer to move the sidebar breakpoint to
1100px
or simply hide it at1100px
?Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 6, 2019 at 10:52 am #977394generatepressuser
Hello
Thank you for the feedfback, with the current code when sidebar is hidden from 1100px below, on the ride side of the page where the sidebar is hidden, is a blank space which doesnt look good. Thats the current status.
How could I move the breakpoint to 1100px?
at the moment, here is the actual code for breakpoint 1100px to hide the sidebar, which keeps letting a blank space on right side of the website:
@media (max-width: 1100px) {
#right-sidebar {
display: none;
}
}anyways dont you think too that the sidebar looks ugly like now when its on small screen above 768px i.e. 769px or 800 or 900px ?
Regards
August 6, 2019 at 11:51 am #977436Leo
StaffCustomer SupportYup I understand the issue. So would you prefer to:
– Hide sidebar below 1100px?
or
– move sidebar below content at 1100px?
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 6, 2019 at 11:57 am #977438generatepressuser
Aaah, I misunderstood you π
I would like to hide the sidebar below 1100px
Regards
August 6, 2019 at 12:04 pm #977443Leo
StaffCustomer SupportCan you disable maintenance mode and let me have another look?
Thanks π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 6, 2019 at 12:12 pm #977449generatepressuser
Ah yes sure, now its disabled ^^
August 6, 2019 at 12:22 pm #977463Leo
StaffCustomer SupportAdd this CSS as well:
@media (max-width: 1024px) and (min-width: 768px) { .content-area.tablet-grid-75 { float: none; width: 100%; } }
Adding CSS: https://docs.generatepress.com/article/adding-css/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 6, 2019 at 1:18 pm #977496generatepressuser
Thank you, I did add this code as well now, great, just tried out with the pixel, it worked good with 1099px instead of 1024px as it is now, your code just with this difference. Or is there something else that would miss some other thing somewhere else as influencing when I do with 1099px?
August 6, 2019 at 2:24 pm #977531Leo
StaffCustomer SupportAs long as your breakpoint is within
(max-width: 1024px) and (min-width: 768px)
then it should work πDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 7, 2019 at 1:33 am #977817generatepressuser
Hello,
thank you but when I do it with 1024px or less, I still have a blank space on the right side, but when I do with 1099px the blank page is disappeared which is good so sidebar is visible starting from 1100px ^^
But 1099 is above the range you mentioned, so Im not sure if it might affect any other unknown points, although it looks good for now with your code, difference is just 1099px instead of 1024px. I just tried around, not sure if I can let it like this or am I missing some other affecting side effects?
Regards
August 7, 2019 at 5:32 am #977945David
StaffCustomer SupportYou’re current method is fine – but i tested this on your site:
@media (max-width: 1024px) { #right-sidebar { display: none; } } @media (max-width: 1024px) and (min-width: 768px) { .content-area.tablet-grid-75 { float: none; width: 100%; } }
And this works correctly. One thing to consider is browser zoom can effect the visible breakpoints. But as long as the above two breakpoints have the same max-width then all should be fine.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 7, 2019 at 10:31 am #978338generatepressuser
Hello,
Thanks for confirmation, yes they are both 1099px in my case, since with 1024px, the sidebar looks a bit too small for its content, so I did 1099px for now, thanks you both for the perfect support. I now only used GeneratePress with some free plugins. I have elementor as well but I did not need it, thats ashame, I should use it sometime π
Regards
August 7, 2019 at 10:32 am #978340Leo
StaffCustomer SupportGlad we could help π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 12, 2019 at 8:10 am #982142generatepressuser
Hello,
Since left sidebar seems looking better, I decided to deactivate right sidebar and activate the left sidebar.
I would like to make the sidebar “display: none” with the main content are adjusted, same as before with right sidebar, but now with the left sidebar.
I already tried the same code as above while changed the word left sidebar and “tablet-grid-80” (as what I could find) but its not working. Hiding the left sidebar is working well, but the main content “tablet-grid-80” is not adjusting same as before we made with right sidebar.
Its not emergency but thank you anyways.
Regards
-
AuthorPosts
- You must be logged in to reply to this topic.