[Resolved] sidebar visibility and main container on smaller screen

[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

[Leo]

Hi 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 at 1100px?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[generatepressuser]

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

[Leo]

Yup 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/

[generatepressuser]

Aaah, I misunderstood you 🙂

I would like to hide the sidebar below 1100px

Regards

[Leo]

Can 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/

[generatepressuser]

Ah yes sure, now its disabled ^^

[Leo]

Add 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/

[generatepressuser]

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?

[Leo]

As 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/

[generatepressuser]

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

[David]

You’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/

[generatepressuser]

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

[Leo]

Glad we could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[generatepressuser]

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

[Author]

Posts