[Support request] Change width of WordPress page

Home Forums Support [Support request] Change width of WordPress page

Home Forums Support Change width of WordPress page

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1645036
    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?

    #1645076
    Elvin
    Staff
    Customer Support

    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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1645099
    Shivam

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

    #1645126
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1645241
    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)

    #1645259
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1645279
    Shivam

    Here you go..

    #1645326
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1645345
    Shivam

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

    #1645390
    Elvin
    Staff
    Customer Support

    You can try this CSS as a workaround:

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

    A wise man once said:
    "Have you cleared your cache?"

    #1645397
    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…

    #1645409
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1645424
    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…

    #1645456
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.