Support » Plugin: GenerateBlocks » Inner container not respecting max-width when padding applied

  • Resolved pracko


    On the latest version of GB, I notice that inner containers stretch wider than the set max width of the inner container when padding to its sides is added.

    Seems this is because the inner container isn’t using box-sizing: border-box; which I believe it did in the past.

    I hacked around this by using a custom class, but it would be nice to have the inner container automatically respect the set max-width when it is explicitly set.

    Maybe I’m just using it wrong?


Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support fernandoazarcon2


    Hi @pracko,

    By default, the box-sizing should be border-box from the HTML. All Containers just inherit this.

    You may have a plugin or custom code causing the issue.

    Thread Starter pracko


    I tried testing again on TT3 with all plugins except GB deactivated.

    The Global max-width setting in GB is set @ 1200px.

    Still the same result. The inner container is wider than the established wide/max-width of 1200px when padding is added to the inner container.

    With 30px padding on the inner container, the container expands to a width of 1260px. The inner container should maintain the max-width of 1200px though.

    I checked with my code inspector and the inner container is indeed still not using box-sizing: border-box;

    Plugin Support Leo


    Can you link us to the page in question?

    Thread Starter pracko


    Here ya go. First two examples are native groups just for performance comparison, the last two are GB containers. It’s the last GB container that’s the issue because box-sizing: border-box; is not being applied when padding is added to the inner container.

    Plugin Support David


    Hi there,

    TT2 and TT3 for some reason choose not to add the rather common and obligatory CSS that sets the box-sizing: border-box as the default element box sizing. ie.

    html {
    	box-sizing: border-box;
    *::after {
    	box-sizing: inherit;

    This is included in on TT1 and previous WP Themes and most popular themes stylesheets including GeneratePress

    The simple solution is to add the above CSS to the theme.

    Thread Starter pracko


    Hi David, thanks for tracking this down to changes in the latest TT themes and providing a temporary fix.

    Knowing this, do you think it would be make sense for GB to add this CSS to a future update so that others don’t face the same issue?

    I’ve been following this discussion, but got stuck at TT1, TT2 and TT3.
    For anyone one else it refers to the Twenty Twenty One, Two and Three themes that come with WP 🙂


    Plugin Author Tom


    I think it’s important that GenerateBlocks only adds CSS that applies directly to its blocks. Adding things like box-sizing is likely something that should be left up to the theme.

    Thread Starter pracko


    Point well taken, Tom. The problem is that the recent changes to those themes is causing GB containers to *not* perform as expected. Therefore .gb-container > .gb-container {box-sizing: border-box;} (or something along this line) should be added in a future update to GB (rather than added manually as a hack) so that containers will perform as expected despite what theme is being used.

    As more block/FSE themes come into use, more users may begin to experience this problem. I’ve already encountered it with:
    – TT3
    – Spectra One
    – and as David reported, TT2

    Thanks for your consideration on this.


    • This reply was modified 4 months, 3 weeks ago by pracko.
    • This reply was modified 4 months, 3 weeks ago by pracko.
    Plugin Author Tom


    It may make sense to add a box-sizing option to the blocks so you can set this, but I still think it makes more sense to set it globally (at the theme level) with some CSS.

    Will talk about it with the team.

    Thanks! 🙂

    Thread Starter pracko


    Sounds good. I’m thinking maybe a box-sizing option at the container setting level might be confusing to some (i.e. they may not know what it means or what it does without referring to documentation). But if you added the targeted CSS .gb-container > .gb-container {box-sizing: border-box;} into GB itself, there would be no confusion and the container would just act as it always did in pre-FSE theme days. Just a thought, but maybe there’s a potential conflict with flexbox that I haven’t considered. Anyway, thanks for your consideration!

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