[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
    Posts
  • #1406444
    Dom

    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.

    #1406452
    Leo
    Staff
    Customer Support

    Hi there,

    We can use this CSS:

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

    Adding CSS: https://docs.generatepress.com/article/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.

    #1407155
    Dom

    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.

    #1407373
    David
    Staff
    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:

    https://docs.generatepress.com/article/page-builder-container/

    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.

    #1695796
    Steven

    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 customgrowngreenhouse.com

    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

    #1696128
    David
    Staff
    Customer Support

    Hi there,

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

    https://generatepress.com/forums/topic/100-width-container/#post-1407373

    Then build your pages with the GenerateBlocks plugin:

    https://generateblocks.com

    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:

    https://developers.google.com/maps/documentation/embed/map-generator#create-project

    #1697061
    Steven

    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. https://ibb.co/6BSzHt2

    #1697084
    David
    Staff
    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.

    #1697716
    Steven

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

    #1697903
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.