Container Block width confusion

@stinkykong Thanks for bringing this up! Often times matching between the editor view and the frontend view can be quite hard, difficult to debug, and often simply out of our hands. Here’s why:

When you load the editor, the theme has the option of loading “editor styles”, styles which the theme chooses to match the frontend. Some themes do this well (see Twenty Nineteen) and others don’t.

Container widths are often one of the styles that don’t get properly included by the theme in editor styles, since the theme will often focus more on typography and colours.

Additionally, themes can sometimes override the Genesis styles on the frontend (or even in the editor), causing a mismatch between the editor and preview.

If you’re noticing this as a specific replicable problem across multiple themes, then I can action this further. My next step would be to try to replicate the issue –?so I would need the steps that you went through to create the specific blocks, included (as you helpfully included above) the expected result and the actual result.

Thanks!

I was seeing this in multiple sites using Genesis with Infinity Pro child. I just tried this with 2021 theme and get the same results. Here is what I do:

Adding blocks, I add a Genesis Container block, then inside that add another Genesis Container block. Set the outside container to full width with a background color. Set the inside container block to have a contrasting background color with max width of 900px and some padding. This is the referred user error since I should put the max width (“inside width”) to the outside container. However now I see what I’m trying to achieve in the editor but in published view, this doesn’t display as I hoped. See the above thread’s screenshots for reference to the different behaviors.

@stinkykong Sorry it took me a while to get back to you. I’ve been testing this out myself too.

I’m trying to define exactly what the problem is, so I can report it back to the team. I think I’ve narrowed it down to this:

When in the Block Editor, the Container block does not correctly display “Inside Container Max Width” settings greater than the theme’s default content width.

That’s a bit wordy, I’ll try to put it another way…

In the Block Editor, the Container block’s “Inside Container Max Width” gets overridden by the theme’s default content width. This causes the Editor to display Containers differently in the Editor than on the Frontend.

Do you think that covers it?

@lukecarbis I’m busy and distracted, also, and slow to respond (and tend to be wordy). I don’t think this affected by the theme’s default content width as in both my themes’ cases, applying full-width exceeds the their default container widths… or do you mean in the editor window… still the same applies to Infinity Pro and WP’s 2021. Does it help to see in this video? Maybe less wordy…