[Resolved] Flexbox and Sidebar Padding

[Marius]

Hello,

on two websites, if have switched to Flexbox. But then the Content of the sidebar get very narrow.

Then in the customizer, I have changed the padding values all to zero, so the sidebar looks like before with Floats.

Is this okay to do so? Or is there a better way to do this?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Marius]

I have send the URL. There I have switched to Flexbox and have the padding all to 0.

[Leo]

Not sure if I’m seeing an obvious issue here.

What does it look like when it’s in Float?

[Marius]

As I said:

on two websites, if have switched to Flexbox. But then the Content of the sidebar get very narrow.

Then in the customizer, I have changed the padding values all to zero, so the sidebar looks like before with Floats.

I want to know, if this is okay to do so? Or is there a better way to do this?

[David]

Hi there,

yes it is fine to remove or just reduce the padding. You can also change the sidebar widths. You may want to keep the Padding for Mobile depending – check it on a mobile device to see if padding should be kept.

[Marius]

Hi David,

Good advice from you. i have looked on mobile and there the sidebar is of course under the post. But there is no space between post and Sidebar.

If i make the sidebar more wide, then the whole website get wider too, because i don´t want the content to be more narrow.

Is this advisable to do so?

[Leo]

If i make the sidebar more wide, then the whole website get wider too

That shouldn’t happen. The sidebar width is a percentage of the overall container width set in the customizer:
https://docs.generatepress.com/article/container-width/

So when you increase the sidebar width, the content part should get narrower but the whole website width should not change.

If you want to increase the sidebar width but also keep the content container width the same, then you will need to increase the entire container width to do so.

Does that answer your question?

[Marius]

Leo, if you had quoted me correctly, then you don´t have to explain like you did.

I wrote:

If i make the sidebar more wide, then the whole website get wider too, because i don´t want the content to be more narrow.

So the question is:
What can I do, to solve the problem i wrote:

i have looked on mobile and there the sidebar is of course under the post. But there is no space between post and Sidebar.

[Leo]

Have you tried adding some top padding to the widget padding option with the mobile toggle on?
https://docs.generatepress.com/article/widget-padding/

David mentioned here as well:
https://generatepress.com/forums/topic/flexbox-and-sidebar-padding/#post-1694833

[Marius]

Ah, yes that might be the solution. I try it.

But i wonder, why this happens in the first place. Because on other sites with the same design (marketer site) that does not happen with flexbox. But there the container are separated. Is that the cause?

[David]

Can you check the Customizer > Layout > Container > Content Layout is the same on both sites ?

[Marius]

No, as I said, on one site the container are separated and on the other site it is one container. The problems are only on the site with one container.

[Ying]

Hi Sonja,

There might be some reason for this, but we won’t be able to know if we can’t replicate the issue.

You sidebar looks good now, anything else we can help with?

[Marius]

David asked me a question, and I have answered him. So I guess, he might have an idea.

[Author]

Posts