[Resolved] Set content width to 100% on pages with no sidebar

Home Forums Support [Resolved] Set content width to 100% on pages with no sidebar

Home Forums Support Set content width to 100% on pages with no sidebar

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1277996
    mikeb82

    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?

    #1277998
    David
    Staff
    Customer Support

    Hi there,

    try this:

    @media (min-width: 768px) {
        .right-sidebar #primary {
            width: 73%;
        }
        #right-sidebar {
            width: 27%;
        }
    }

    This uses the .right-sidebar body class so this .right-sidebar #primary will only style the #primary area if the the page has a right-sidebar

    #1278006
    mikeb82

    That works great! It’s brilliant.

    Thanks David!

    #1278687
    David
    Staff
    Customer Support

    You’re welcome

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.