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

[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?

[Leo]

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

[kyle]

I dont understand Leo?

[Leo]

Sorry which part?

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

[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?

[David]

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?

[kyle]

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

[David]

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.

[kyle]

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

[David]

How/Where did you add the CSS?

[kyle]

I added it in the additional CSS in customizer

[David]

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

[kyle]

Yes i removed it, alright let me try that then

[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

[David]

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 ?

[Author]

Posts