The grid system only allows for sidebar widths to be set in 5% increments using Customize. If my container is 1200px, 25% give me a 300px sidebar width. The next available width is 30%, which creates a 360px sidebar width. What if I just need a 320px sidebar? I can’t do it in Customize. In another Support thread I found that I could target #primary and #right-sidebar with CSS to get the width I need.
@media (min-width: 768px) {
#primary {
width: 73%;
}
#right-sidebar {
width: 27%;
}
}
This works great for sites that have a right sidebar on every page. It does not work for sites with some sidebar pages and some full width pages as the full width pages are then limited to 74%. The first site I tried and noticed this on only had 2 full width pages. The code below took care of this.
/* No sidebar */
@media (min-width: 768px) {
.page-id-8 #primary, .page-id-10 #primary {
width: 100%;
}
}
What about sites with lots of pages, some with and some without sidebars? I could just add more pages using page ID, but it seems to me that this could be better handled with some PHP in functions.php. Rather than spend a lot of time trying to come up with the right script and discovering the correct selectors to target, I thought to ask the experts here.
Can you folks suggest a script that will set #primary to 100% width on pages with no sidebars?