[Resolved] Sidebar configuration

Home Forums Support [Resolved] Sidebar configuration

Home Forums Support Sidebar configuration

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #795152
    Liran

    Hello,

    How can I set the sidebar to have a fixed width of 300 pixels?
    Also, I need the sidebar to remain beside the content on all screens greater than 1023px in width

    Please advise,
    Thanks!

    GeneratePress 2.2.1
    #795411
    David
    Staff
    Customer Support

    Hi there,

    can you provide a link to the site? You can edit your original topic and use the Site URL field for privacy.

    #795418
    Liran

    Unfortunately, I can not share the site (for competitive reasons)

    However, I am assuming this is something that can be done via CSS? I personally have not found a way to set it up inside the theme

    #795579
    David
    Staff
    Customer Support

    I can provide CSS to set the sidebar but really need to see the site so i can apply it to your requirements especially in regards to keeping it positioned. – the Site URL field is private and only the GeneratePress support team can see it. Is that an issue?

    #795590
    Liran

    Done, please have a look

    #795609
    David
    Staff
    Customer Support

    Try this:

    @media (min-width: 768px) {
        .site-content {
            display: grid;
            grid-template-columns: auto 300px;
        }
        #primary, #right-sidebar {
            width: 100%;
        }
    }

    You can adjust the sidebar width grid-template-columns: auto 300px; the auto value is for the primary content and will just fill the space available.

    #795621
    Liran

    Seems to work well!

    One question, how can I move the sidebar down once the resolution drops below 1023px?

    #795629
    David
    Staff
    Customer Support

    Cool – so using CSS Grid we could do this:

    @media (min-width: 768px) {
        .site-content {
            display: grid;
            grid-template-columns: 100%;
        }
        #primary, #right-sidebar {
            width: 100%;
        }
    }
    
    @media (min-width: 1023px) {
        .site-content {
            display: grid;
            grid-template-columns: auto 320px;
        }
        #right-sidebar {
            padding-right: 20px;
        }
    }
    #795631
    Liran

    Thank you, David!

    #795632
    David
    Staff
    Customer Support
    #795693
    Liran

    Hi David, I noticed that around 1039px, the sidebar starts to get cut off. Why is that?

    #795703
    David
    Staff
    Customer Support

    Which browser are you seeing this in ? I tested in Chrome, FF and Safari and not seeing this happen. The sidebar does touch the edge of the screen though.

    #795718
    Liran

    I am using the latest version of Chrome

    Maybe we can set a margin to address it?

    #795752
    David
    Staff
    Customer Support

    I edited the code above which adds 20px padding to keep it off the edge of the screen. And increased the sidebar width to 320px to offset the padding.

    #795779
    Liran

    Does not seem to help, the sidebar border starts to stick to the edge of the screen in about 1050px

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