[Resolved] Changing main container width for one page

Home Forums Support Changing main container width for one page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1340189
    bramtim

    I want to change the main container width for just one of my sites pages that contains a large table.

    I would like the width to not be based on pixels but perhaps a percentage. I can handle this with css but how do I apply it conditionally to just that one page?

    #1340381
    David
    Staff
    Customer Support

    Hi there,

    if you want to apply a % width it will require CSS that targets the page-id-* body class. For the page you linked to it would be this:

    body.page-id-1507 .grid-container {
        max-width: 80%;
    }

    You may want it inside a media query so it doesn’t effect smaller device screens like so:

    @media (min-width: 1200px) {
        body.page-id-1507 .grid-container {
            max-width: 80%;
        }
    }

    If you want to use PX instead of % you can use the Layout Element to change the Content Width:

    https://docs.generatepress.com/article/layout-element-overview/

    #1340835
    bramtim

    Thanks David! That worked amazingly!

    #1341173
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.