[Resolved] Add more space between sidebar and content

[blackbird]

Hi, this is probably very easy, but I´m not sure about the best CSS-solution to this:

I have a left sidebar on almost every page/post, but some pages is without any sidebar (like the static frontpage). When there is a sidebar I want more space/air between the left sidebar and the content (including the featured image!). I am pleased with the sidebar width and all other global spacing and padding, so I don´t like to affect that. I just want to make the content more narrow (“moving the left side of the content more to the right”).

But it must not effect the content on pages that does not have any left sidebar, like the frontpage! If I just add more left-padding to the content, that will also effect the pages without sidebars making them looking off (of course with more padding to the left than to the right).

How pinpoint only page/post content that does have a sidebar? And should I add padding or margin?

[Tom]

Hi there,

Your website doesn’t seem to be viewable right now.

Have you tried the Separating Space option?: https://docs.generatepress.com/article/separating-space/

Let me know 🙂

[blackbird]

It was in maintenance, now it is back.
I have separating space set to 20px, content padding set to 20 px left and right, sidebar widget padding set to 20 px left and right. But still I am not happy 😉
I like to add an “asymmetric” extra left padding to content, to make more space between it and the sidebar, but not if there is no sidebar.

[blackbird]

Or another solution might be to increase the separating space option as you said, but somehow with CSS remove/change the top and bottom spacing that also gets extra added. Because I do not want more air at the top between the content and the header (or the hero image).

[Tom]

Give this CSS a shot:

.left-sidebar.separate-containers .site-main {
    margin-left: 40px;
}

Let me know 🙂

[blackbird]

Yes! That did the trick! (I have not implemented it live yet, but have tried it.)

I did find a lot of other CSS trix in the support forum, but not exactly this target.

Solved, thank´s!

[Tom]

You’re welcome 🙂

[Author]

Posts