Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Setting Container Width

  • Hi Guys, I’ve got website – a custom build. However, to keep build costs down we’ve built the blog in GP.

    Naturally, we want to keep the look of the blog as close to the main site as possible. But I’m struggling to get the container width to match, especially across all devices.

    This is the main site: https://dirtybertie.co.uk/
    And this is the blog: https://dirtybertie.co.uk/blog/

    Can you help?

    Many thanks!

  • Hi there,

    tricky one.
    The custom build is using a max-width of 1600px with inline padding set to REMs.
    The padding varies between 0, 1.25rem and 5rem at higher breakpoint.
    The REM unit value is also variable due to this CSS:

    
    html {
        font-size: min(1vw,16px);
    }
    

    So its complicated and replicating it in GP is not going to be 100% accurate.
    For the basic containment width try:

    1. set the themes Container Width to 1600px.

    2. add this CSS to set the REM size and padding to match the homepage.

    
    html {
        font-size: min(1vw,16px);
    }
    .grid-container {
        padding-inline: 1.25rem !important;
    }
    @media print,screen and (min-width:64.0625em) {
        .grid-container {
            padding-inline: 5rem !important;
        }
    }
    
    

    It should get you something close.

  • Hi David,

    Thanks for this. So the container has worked pretty well.

    However, the body font has gone small on tablet and tiny on mobile. Here’s an image to show you what’ going on: https://imgur.com/a/Kn7JqR2

    Any ideas?

    Thanks again!

  • Ah theres a bunch of media breaks for the root rem size and one additional rule for serving the p size.
    Update the CSS to this:

    
    html {
        font-size: min(1vw,16px);
    }
    .grid-container {
        padding-inline: 1.25rem !important;
    }
    
    p {
        font-size: 1.15rem
    }
    
    @media print, screen and (max-width: 75.06125em) {
        html {
            font-size:min(1.2vw, 21.3333333333px)
        }
    }
    
    @media print, screen and (max-width: 64.06125em) {
        html {
            font-size:min(1.5vw, 21.3333333333px)
        }
    }
    
    @media screen and (max-width: 800px) {
        html {
            font-size:min(2vw, 21.3333333333px)
        }
    }
    
    @media print, screen and (max-width: 40.06125em) {
        html {
            font-size:min(4.2vw, 21.3333333333px)
        }
    }
    
  • Hi David,

    I’m sorry to b a pain on this.

    When I ass the updated CSS, it removes all the container padding. Here’s a video to show you what happens:

    https://www.loom.com/share/3c0f9c534e5d4e5aa67e9f5c9c79e436?sid=f4a47af3-5f56-40f0-8ca1-04b448cb172d

    Thanks

    Ben 🙂

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