[Support request] How to stop the sidebars from affecting post content

Home Forums Support How to stop the sidebars from affecting post content

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1512619
    kyle

    Hello guys and girls,

    When I allow my right sidebar on to post pages, it affects the width of my content. How can stop this from happening, I’d like to keep the original post width whilst still having right or left side bars?

    #1512641
    Leo
    Staff
    Customer Support

    Hi there,

    The content width set in the customizer includes sidebars.

    You can increase the content container width when a sidebar is present using a layout element:
    https://docs.generatepress.com/article/layout-element-overview/#content-1

    #1512646
    kyle

    I dont understand Leo?

    #1512716
    Leo
    Staff
    Customer Support

    Sorry which part?

    Have you tried creating an layout element with a wider content width then set the display rules to all posts?

    #1522227
    kyle

    Hi Leo, I currently have an element set to 950px affecting all posts but no dice.

    The thing is there is so much space on the right of the side bar that i’d prefer the widgets to take up, this way the area for my content will have more space. How can i do this?

    #1522636
    David
    Staff
    Customer Support

    Hi there,

    Do you want the post content to be 950px centered + the sidebar sitting in the space to the right ?

    If so what happens when the screen reduces in size – Should the post content reduce in size to accommodate the sidebar? Or should the sidebar move to below the post content?

    #1522649
    kyle

    The side bar can move to the bottom in order to be mobile friendly 🙂

    #1522861
    David
    Staff
    Customer Support

    You could add some CSS like this:

    @media(min-width: 1480px) {
        .right-sidebar.single-post .is-right-sidebar {
            position: absolute;
            max-width: 300px;
            left: calc( ((100vw - 950px) / 2) + 950px);
            top: 30px;
        }
        .right-sidebar.single-post #primary {
            width: 100%;
        }
    }
    
    @media(max-width: 1479px) {
        .right-sidebar .site-content {
            flex-direction: column;
        }
        .right-sidebar .site-content .content-area,
        .right-sidebar .is-right-sidebar {
            width: 100%;
        }
        .right-sidebar #main {
            margin-right: 0;
        }
    }

    My only concern here is that the sidebar will only show up to the right on screen sizes over 1480px. You could reduce the container width to make it work on smaller screens.
    Then reduce the value in this line of the CSS:

    left: calc( ((100vw - 950px) / 2) + 950px);

    Then reduce the 2 x @media width values for any reduction you make.

    #1522866
    kyle

    Hey David, that CSS does not change anything, I’m not sure why?

    #1523045
    David
    Staff
    Customer Support

    How/Where did you add the CSS?

    #1523709
    kyle

    I added it in the additional CSS in customizer

    #1523719
    David
    Staff
    Customer Support

    Did you remove it ? as i cannot see it in there. Try adding it to the very top of the CSS.

    #1523747
    kyle

    Yes i removed it, alright let me try that then

    #1523754
    kyle

    Ok so what that does is it moves the sidebar widgets all the way to the bottom. i’d like them to only do that in mobile.

    I just want the side bar widgets to take up some more space on the right so that there is more space for the post contetn to be wider

    #1523982
    David
    Staff
    Customer Support

    As i said above, this only works if it is viewed on a large screen ie 1480px or greater.
    Do you want to keep the Post content width at 950px ?

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