[Support request] Set global container withs to be different with pages that have sidebar

[Josh]

Is there a way to do this? I’d like the container with to be 900 if there is no sidebar but container width to be 1200 so that the side bar will be 300 and page content will be 900.

[Fernando]

Hi Josh,

You can create a Layout Element, and set it to display on the specific pages with a sidebar.

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

[Josh]

Hey Fernando! Thanks for helping! That doesn’t work though. it still gets overwritten:

.grid-container { (from inline:2)
max-width: 892px;
}
.grid-container { (from main.min.css:1)
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}

It looks like because the customizer puts it inline it’s overwriting what the layout element creates. I’ve posted a link to the page in the private info.

[Fernando]

Try setting 1200px in the Customizer and 900px in the Layout Element.

[Josh]

Isn’t that more of a bandaid to the issue? It feels backwards, and not sure it would make any difference if the customizer is pulling rank. Is there a hook to use? I guess I could just use css too?

.page-id-xxx.grid-container { (from main.min.css:1)
max-width: 1200px!important;
}

but I dislike having to force the css that way.

[Fernando]

Actually, can you try setting the Content Area of your Layout Element to Full width and then set the Content width to 1200px?

Let us know how it goes.

[Author]

Posts