There’s one obvious question at the root of all this. Why are containers in Bricks set to a default of 1100px?
This default dimension doesn’t occur in any builder I’ve ever used. It doesn’t occur in Gutenberg and it doesn’t occur when setting up an htmal/css page from scratch.
The cont is set to max-width 1360px and the div is set to width 100% and max-width 1360px in your page. To compare set the container also to width 100% would give same result. Also at some breakpoint you have set width 1360px in container.
It’s just a default value. You can change the value in the theme style setting. Bricks did not force/limit you at 1100px.
In the default configuration, the container has a set width of 1100px. If you establish a max-width of 1360px for that container, it implies that the container can only expand up to 1360px if its width is initially set at 1360px or wider. Since the default width is 1100px, it will not surpass this value. Consequently, the container’s maximum width is effectively constrained to 1100px. Again, you can set this width to the width that you want.
As for this site (first section), I can see that the fixed width of the container is 1100px and you have set a max-width of 1360px. So, it will not surpass the value of 1100px. Consequently, the container’s maximum width is effectively constrained to 1100px.
Regarding the second section, you’ve set a max-width of 1360px, but the container has a width of 100%. As a result, your layout isn’t in a boxed format. You’ll observe that your container will either stretch to 1360px or expand all the way to the edge of the browser, depending on whether the max-width of the container is set to 100%.
the main thing here is only that you’re mixing up the max-width for width. Every Bricks element has a max-width of 100%. To override the 1100px container width, you do it in the theme settings > container > width. (NOT max-width otherwise you’re not overriding it). See my screen recording in the other post.
Arbitrary as in they chose an arbitrary default value, could have been 1140px, could have been 1280px. It’s just the default value that is expected to be changed to fit the specific design being built.
Thanks for taking time to reply, but the example page you’ve responded to has had a dozen different settings applied to it and you might have loaded an old page.
Please dont waste your time on this. Bricks developers (for reasons only known to themselves) have coded a default value of 1100px to the width field in the container element. This is absolutely not necessary and doesn’t occur in any page builder I’ve ever used. The Bricks div element doesn’t have a fixed defaut width for example.
This default width setting only causes problems as this thread has proved, because it’s been 2 days of wasted time trying to figure out why pages don’t render as expected. No one has explained why the 1100px default value exists, and explained why it is needed.
Others have contacted me , saying they’ve given up on Bricks because it is unbelievably confusing. It’s supposed to be a time saving builder but it’s been a whole week of wasted timand I could have built a full site using any other builder by now. What an awful experience this has been for me.
It’s explained in the docs more about the container element and how to use…
It needs to have a fixed width because of it’s purpose on the page, to be the main content width. If it didn’t have a width, it’d just be a div, but that element already exists. so instead of telling everybody to use a div, and always add a width, they created a separate element that has it built in. the idea is that you just change it globally when you first start.
I’ve been with Bricks since version 1.0, have built a few sites with it, and don’t find such an issue. I was trying to explain, but you don’t accept it.
@wplit have clearly explained the purpose of the default value set in the builder.
I’m facing your same problem, this time with two overlapping max-width entries for .brx-boxed
I’ve investigated all around and I can’t see the source.
I set two days ago a max-width 1400px on one page for testing purposes, and then I went to that page and removed all the max-width entrances. Then even deleted that page, disabled footer and header, and the 1400px value seems to be hard-coded somewhere I can’t find. Theme Styles > Element container is greyed out at 1100px, so this is not the issue.
I’ll investigate further as I can’t continue boxing my project until this is solved. (unless I hard code again the max-wisth with !important. I’ve checked on custom CSS on Bricks, WP Code, and all CSS boxes possible.
I’ve used !important tag on Page Settings to override the max-width.
This will help. however the source of the hard coded max-width remains a mistery after half an hour searching for it, and even searching here on the forum for a solution.