Hey there
First of all: I´m sorry that I have to ask this because I know there are other threads already about this topic but even though I´ve read through them all I still don´t understand how to work with the “container” in Bricks and what´s “best practice” for using the container.
Coming from Elementor they made the switch from Rows, Columns, Inner Sections, etc. to Containers which was a great thing! I really love working with Containers there! In Bricks however it confuses me a lot how to work with them.
I worked for a local advertising agency and from what I´ve heard from the ppl who work there and from other ppl achieving a good “boxed layout” for our client websites was always done with “max-width”. Cause setting the wrapper element to a fixed width of like “width: 1200px” always causes overflow! That simply doesn´t work! That´s why I´ve ALWAYS been told to use “max-width: 1200px” instead and that has always worked perfectly so far!
And to me that absolutely makes sense cause for a boxed layout I don´t wanna set a fixed width but I want to limit the maximum width to (let´s say) 1200px. Because then the content can still shrink inside the boxed layout but it cannot go wider than those 1200px.
When working with Bricks (I´m still quite new, just created 2 full websites with Bricks so far) I´ve always avoided to use the “container” element because it usually gave me weird results. I was easily able to create my 2 websites without the “container” though, just by using “blocks” or “divs” and styling them myself. I usually create a class which I call “boxed” where I set the “max-width” to the desired pixel value and give the wrapper element that “boxed” class. That works nicely!
However, I still want to fully understand how to use the container. Especially cause whenever I create a new “section” it always adds a “container” inside automatically.
And before someone mentions that I can change the default “container” values in the “Theme Styles”: I already looked there but the main problem I have with that is that there´s a default width of 1100px and I feel like THAT´S the main problem! I wonder why there´s a default value at all! If that value was empty I could simply set the max-width of the container to 1200px for example and then use the container everytime I want to have that boxed-layout.
Sure, I can just set the width to 100% and the max-width to 1200px. That works. But I still don´t understand why there´s a default value in the “width” field. Why not leave it empty and let the user style it? I feel like for new users like me it´s very confusing when you have the background knowledge of how to work with these values and when to use “width” and when to use “max-width” but then you add a container (because you want to have the boxed layout) and it has that predefined width already applied and you´re wondering why.
Hope you get what I mean and why it´s very confusing for ppl who come from other pagebuilders like Elementor or even from “traditional” building websites with HTML and CSS to have that default value set in the “Theme Styles”
Kind regards,
Soluna