[Resolved] sidebar visibility and main container on smaller screen

Home Forums Support sidebar visibility and main container on smaller screen

  • This topic has 22 replies, 5 voices, and was last updated 11 months ago by generatepressuser.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #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

    #977332
    Leo
    Staff
    Customer Support

    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 🙂

    #977394
    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

    #977436
    Leo
    Staff
    Customer Support

    Yup I understand the issue. So would you prefer to:

    – Hide sidebar below 1100px?

    or

    – move sidebar below content at 1100px?

    Let me know 🙂

    #977438
    generatepressuser

    Aaah, I misunderstood you 🙂

    I would like to hide the sidebar below 1100px

    Regards

    #977443
    Leo
    Staff
    Customer Support

    Can you disable maintenance mode and let me have another look?

    Thanks 🙂

    #977449
    generatepressuser

    Ah yes sure, now its disabled ^^

    #977463
    Leo
    Staff
    Customer Support

    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/

    #977496
    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?

    #977531
    Leo
    Staff
    Customer Support

    As long as your breakpoint is within (max-width: 1024px) and (min-width: 768px) then it should work 🙂

    #977817
    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

    #977945
    David
    Staff
    Customer Support

    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.

    #978338
    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

    #978340
    Leo
    Staff
    Customer Support

    Glad we could help 🙂

    #982142
    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

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.