[Support request] Change width of WordPress page

[Shivam]

I have set the width of my website container 960px through customizer… But I want a different width (1060px) for my WordPress page… What should I do?

[Elvin]

Hi there,

You can change the container max-width for a specific page using Layout Element:
https://docs.generatepress.com/article/layout-element-overview/

On it’s content tab, set 1060px.
https://docs.generatepress.com/article/layout-element-overview/#content-1

You then set the display rule to the pages you want the 1060px content width to apply. 🙂

[Shivam]

I tried that first but that’s not working (screenshot)… and yes I have cleared my cache

[Elvin]

Ah I see.

Your content is made with Elementor. The Elementor Sections are overflowing way past the max-width.
https://share.getcloudapp.com/yAu64wvg

The theme doesn’t control what Elementor does. As for how to bound the Elementor Sections, its best to ask the plugin’s developer on how to do it.

[Shivam]

I know my front is page is build with elementor, but I am not talking about just front page… Look at this page (https://www.nerdblogging.com/privacy-policy/) and look at the page layout option (click here click here 2)

[Elvin]

Do you have any other Layout Elements? Multiple Layout elements can cause issues if their display rule locations overlap.

You can provide us temporary site access so we could take a look. You can use the private information text field to place the details.

[Shivam]

Here you go..

[Elvin]

Thanks.

I’ve checked the layout element and it does seem to be correct.

In that case, there may be a conflict between plugins that prevent the layout element from working properly.

Can you try disabling ALL plugins except GP premium? Then try to enable the plugins one by one and see which one will cause the Layout element to stop working.

Let us know.

[Shivam]

Leave it! is there any CSS option to just increase the site header width to 1060px just for pages?

[Elvin]

You can try this CSS as a workaround:

div#page.container.grid-container {
    max-width: 1060px;
}

[Shivam]

Hey, it is increasing the body width, not the header… I am looking for something to increase the site main header width so I can adjust the body content with generate block accordingly…

[Elvin]

Try this one:

.inside-header.grid-container.grid-parent {
    max-width: 1060px;
}

Optional: If you want to apply this to the footer as well, you can simply do this:

.inside-header.grid-container.grid-parent, .site-footer.grid-container.grid-parent {
    max-width: 1060px;
}

[Shivam]

CSS worked but now the only problem is that it is applying to both post and page but I need only for the page…

[Elvin]

you can try adding body.page selector to apply the CSS only to pages.

Example/s:

body.page .inside-header.grid-container.grid-parent, .site-footer.grid-container.grid-parent {
    max-width: 1060px;
}

or (if you only want the header)

body.page .inside-header.grid-container.grid-parent {
    max-width: 1060px;
}

[Author]

Posts