Archived topic
Changing main container width for one page
3 replies · Started by bramtim on June 24, 2020
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?
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/
Thanks David! That worked amazingly!
Glad to be of help
