Inner container not respecting max-width when padding applied

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.

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;

Can you link us to the page in question?

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.

https://gp.systemwp.com/containers/

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;
}
*,
*::before,
*::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.

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 ??

Dave

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.

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.

Cheers,
Paul

• This reply was modified 1 year, 6 months ago by pracko.
• This reply was modified 1 year, 6 months ago by pracko.

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! ??

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!