How to customize the container width?

[Indirectelex]

Hey there,
I know this is a basic question but ! wonder how to make the container width equal to it’s box size. Am so annoyed to turn around…

[kory]

Hey, @Indirectelex…thanks for writing in and we’ll be happy to help point you in the right direction! So with the Bars, they are setup in more of a “freeform” kind of way to allow people to get maximum flexibility when designing responsive patterns for managing things like logos, navigation, et cetera. The best thing to do is start with understanding how Bars manage all this from the get go, and then adjust things from there. So when you add a new Bar to your Header, it automatically adds one Container to your markup, which will look like so:

Inspecting the Bar and scrolling down a bit, you’ll find the Dimensions control group, which features some very important controls to start our base design from:

• Height: sets the height of the Bar
• Outer Spacing: sets the inset spacing on the x-axis that pushes any Container children away from the edge. So in this example, you can see we have a value of 2em set, which is why the empty Container’s dashed outline doesn’t go all the way to the edge of the Bar.
• Content Length: effectively sets the width of a Container via flex-basis in a Top Bar like this. You will typically want to leave this at 100% or auto, or maybe bring it in slightly, but we would advise against doing anything very small like 50% or something like that, as this will get very small on mobile devices.
• Content Max Length: effectively sets the max-width of a Container in a Top Bar like this. This is where you could set a maximum cap on how wide any Containers should appear in you Bar.

So for your situation, if you’re trying to make your Container fill the entire width of the Bar, you would want to setup the Dimensions on its parent Bar like so:

Basically, we just need to set the Outer Spacing value to 0 with any unit associated. This will remove the x-axis offset from the edges of the bar, allowing the Container inside the Bar to extend fully within that space. Then inside your Container, you can do whatever you want.

Hopefully that helps to point you in the right direction!

[Indirectelex]

Well, that is the part I feel dumb, but I thank you because you explained to me that obvious way to do it with pictures and now this is super clear to me how to do it!

[nabeel]

Glad that we could be of help.

Cheers!