Archived topic
Very narrow sidebar
5 replies · Started by Vl on February 27, 2018
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.
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?
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?
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;
}Thank you!
No problem! :)
