[Resolved] Siderbar right outside the Content Area

[Bouwman]

Hello,

i would like to have my right Sidebar outside of the Content area.

I want to keep my page contained and don’t want to go to full width.

Hopefully someone can help me with this problem.

[David]

Hi there,

i can’t see where you have the GP Sidebar, looks like you’re using Visual Composer?
For the default GP template, you can choose separate containers in Customizer > Layout > Container.

[Bouwman]

That’s correct, because the sidebar makes it look funny.

I can turn it on for now so you can see what i want.
You have seen the page like it is now?

I need the sidebar to be NEXT to that. instead of the sidebar to crop up the page.

I already tried the Container option.

[David]

OK, i can see it but not sure what the issue is 🙂
So how do you want the sidebar to be placed? So the content area is the same size as it is without the sidebar?

[Bouwman]

Yes, exactly that!

[David]

Hmm not exactly easy as the content will move around the page, this CSS should give you a good starting point – it applies to pages with the right-sidebar whilst on desktop view.

@media (min-width: 1024px) {
    .right-sidebar #page {
        max-width: 100%;
    }
    .right-sidebar .site-content {
        display: flex;
    }
    .right-sidebar #primary {
        max-width: 1290px;
        margin-left: auto;
    }
    .right-sidebar #right-sidebar{
        max-width: 387px;
    }
}

[Bouwman]

it’s perfect! thanks a lot!!

[David]

wow – first shot 🙂 glad to be of help.

[Albert]

Hello,

I would like to make something similar: to have a right sidebar outside the content area, but keeping the content area centered into the screen (as it is now without the sidebar).

My dimensions are 860px for the main content and 258px for the right sidebar.

Could you help me with a CSS code for that?

[David]

Hi there,

if you can raise a new topic with a link to your site, i can take a look at whats required.

[Author]

Posts