Post and sidebar container adjustments

[Swadhin]

Hi there,

Please help me adjust my site’s containers (post and sidebar) so that they look like this site. I am not talking about the big header image and all, just how the content box is a bit to the middle, and then has a sidebar also.

I have a rough screenshot of the site here to help me express better.

Thank you so much. 🙂

[Leo]

Hi there,

Have you tried adjusting the sidebar width?
https://docs.generatepress.com/article/sidebar-widths/

They are using a container width of 1280px and about 3:1 ratio for content and sidebar.

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Swadhin]

Hi Leo,

Thanks for the help. I set the container width to 1280 px but where do I setup the 3:1 ratio?

[Leo]

Have you tried using the sidebar width option suggested above?

Using 25% for sidebar width would give you that ratio.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Swadhin]

I did but that only let’s the content part fall flat within the rest 75% of the screen estate.

Please see the screenshot of my result and that original page’s result. It’s nowhere close.

[Tom]

They’re using a “fake” element to create that space.

You could set a max-width of the main content container instead:

@media (min-width: 769px) {
    #main {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

Let me know if that helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Swadhin]

Hi Tom,

Thanks for replying. I added the above code. By applying the code, we are basically in the same content with sidebar layout that comes default with the theme (see the screenshot here).

Here is another screenshot I created without your code and just center aligned the post area to give you an idea of the layout.

Here are some other sites that use the same layout in case you want to reference.

[Tom]

I’m not sure I’m fully understanding. Isn’t that where the sidebar is placed by default?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Swadhin]

Hi Tom,

Sorry for the confusion. Let me explain again:

See this page (this is the default GeneratePress template with right sidebar). Here we have equal space (or padding) on both sides (left of blog post and right of the sidebar).

Now, if you look at the design of Siegemedia or CopyBlogger blog (please see screenshot here), you’ll notice both have more space to the left side and very little space to the right side (right of the sidebar).

Why I am keen on this is, this is a trendy design most authority sites are picking up on. It:

1. Makes the article a center aligned giving impression of the no sidebar layout.
2. Still has a sidebar to get the benefits of it

It would be so kind of you to please help me achieve this with GeneratePress.

Thank you.

[Tom]

I just checked out CopyBlogger and they’re using a very similar method that I provided above: https://generatepress.com/forums/topic/post-and-sidebar-container-adjustments/#post-943021

What if you adjusted it to something like this?:

@media (min-width: 769px) {
    #main {
        max-width: 700px;
        margin-left: auto;
        margin-right: 30px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Swadhin]

Hi Tom,

This was exactly what I needed. Thanks so much. I hpe it will not effect the respnsiveness of the site and will look good on all devices. 🙂

Thanks again,
-Swadhin

[Tom]

The media query should prevent it from doing anything on mobile.

Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Swadhin]

Hi Tom,
Sorry to be raising this issue again but the above code also adds effect to the blog page and archive pages (please check category archives from the link I have given in secret site link section) too. How to enable it only to singular posts and pages with sidebars only. Not anything else.

This is also affecting pages with no sidebars which looks totally messed up and also affects pages built with page builders (because they also don’t have sidebars?).

OR

Can we put this as a post template (layouts where we choose:
Content / Sidebar
Sidebar / Content
Content (no sidebars)
Sidebar / Content / Sidebar
Sidebar / Sidebar / Content
Content / Sidebar / Sidebar) while writing our posts?

Please help.

[Tom]

Let’s try this:

@media (min-width: 769px) {
    .page.right-sidebar #main,
    .single.right-sidebar #main {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts