[Resolved] Very narrow sidebar

[Vl]

Hello!
Let me ask you a question.
I used the code from this topic: https://wordpress.org/support/topic/sidebar-at-breakpoint/#post-10006668
But the problem is that at breakpoint 769 the left sidebar is very narrow. I changed this code a bit (see below):

@media (min-width: 769px) and (max-width: 1024px) {
.both-sidebars #primary {
width: 75%;
left: 25%;
}
.both-sidebars #right-sidebar {
width: 100%;
}
.both-sidebars #left-sidebar {
left: -75%;
width: 25%;
} }

Now, in the case of the” sidebar-content-sidebar”, the left sidebar and menu is of normal width.
But in the case of “sidebar-content” left sidebar is very narrow and menu breaks. At this page you can see the website and at the pictures you can see the problems with the sidebar: http://qas234.com.fozzyhost.com/?page_id=9

Answer please:
1. How to fix the problem?
2. Is the code I use correct?

Thank You.

[Tom]

The .both-sidebars code you’re using will only work on pages where both sidebars are set.

In the case of left sidebar/content, that CSS won’t apply.

Is there always a left sidebar? What about a right sidebar?

[Vl]

1. On different pages I will use: sidebar-content-sidebar, or sidebar-content, or content-sidebar.
2. Is it possible to make a different Container width depending on the number of sidebars?

[Tom]

1. So you would need to target the widths based on what kind of page you’re viewing.

Both sidebars: .both-sidebars
Left sidebar: .left-sidebar
Right sidebar: .right-sidebar

2. Absolutely. Just add one of the above classes in front of .grid-container:

body.both-sidebars .grid-container {
    max-width: 2000px;
}

[Vl]

Thank you!

[Tom]

No problem! 🙂

[Author]

Posts