Black Friday sale! Get up to 25% off GP Premium! Learn more ➝

[Support request] 100% Width Container

Home Forums Support [Support request] 100% Width Container

Home Forums Support 100% Width Container

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #1406444

    Why is it not possible to set the page container to 100% width ?

    The suggestion below seems counter intuitive!

    Container Width

    You can adjust the width of your overall site container inside Appearance > Customize > Layout > Container.

    You can use the slider to adjust the width in pixels, or directly input your number into the field.

    You can set it to a percentage using CSS, however I typically recommend choosing a really high pixel value like 2000 if you’re looking for a 100% width website. Since GeneratePress is responsive, it will be 100% wide on most screens at that width.

    Customer Support

    Hi there,

    We can use this CSS:

    body .grid-container {
        max-width: 100%;

    Adding CSS:

    But keep in mind that this method is not common as the site would look pretty weird is someone is using a 60″ TV to view your site.


    Hi Leo,

    Thanks for your quick reply and solution.

    I don’t see how it would look any more weird on a 60″ tv than on my 27″ monitor, 4k is 4k regardless and a fixed pixel value on a 60″ screen is going to seem a lot larger no matter what you set it to because the pixel pitch is higher.

    My intention is to use a pagebuilder (wpbakery/visual composer) and specify containers with percentage borders and margins. I’m not sure how they two will interact to it seemed logical to set the base theme to 100% width and then adjust everything else on top.

    Customer Support

    Hi there,

    If you’re going to use a pagebuilder to create all of the page content then use the Page Builder Container meta box:

    The layout element mentioned in the article will allow you to set it across the site using Display Rules.

    You can set the page to full width which will also strip the theme padding.
    You can then set your container widths and padding in the pagebuilder.


    Good Mornin,
    I am having the same problems.

    I’ve done the Simple CSS Method & have looked for the page container meta box, both did not fix my problem.

    I am using GPP and my website is

    Unrelated issue,

    How do you embed a Google Map easily? I saw on a different forum that I could use an iframe of google maps that I want to embed in a block. I tried the code, embed url and paragraph all with no luck.

    The only way I have “successfully” embeded is from leftover elementor link and going in the code editor, and manually enter it but it also acts funky so I would like to know the real way for upcoming pages.

    Thanks for the support

    Customer Support

    Hi there,

    the best method for setting full page containers is the method i provide here:

    Then build your pages with the GenerateBlocks plugin:

    You can then use the GB Container Block to split your page into full width sections. Each Container can have a separate background, separate inner container width ( to stop content from scaling beyond a certain width on really large screens ) and padding.

    For Google Maps – google requires an API Key to generate a map embed now.
    This document provides the how to and links for creating your embed codes:


    The API maps info worked great, thank you.

    I don’t know why the 100% width container is giving me a problem on this site, maybe because it was previously an elementor site but I have tried making it full width both ways (on page layout & appearance -> elements -> layout -> full width -> on whole site -> save)

    All it does, is remove the padding from the left hand side of the site. Only this site has given me problems, my other GP site is acting normal so I am stumped. The right hand side of the content is still cut off about half way on my normal sized laptop.

    Here is an attachment of my problem area.

    Customer Support

    Aah you have the Right Sidebar enabled.
    You can disable that Globally in Customizer > Layout > Sidebars.

    Or in the editor of a specific page under the Layout meta box.


    Solved. You’re the best! Have a great one.

    Customer Support

    You’re welcome

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