[Resolved] Changing main container width for one page

[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?

[David]

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/

[bramtim]

Thanks David! That worked amazingly!

[David]

Glad to be of help

[Author]

Posts