How width affects layout
Builder Content
A primary factor in how a block behaves across devices is its width. Builder's blocks already have default width settings, which make them ready to use in responsive layouts. For example, a new Box has no width set, so it fills the width of whatever contains it.
The following article describes the most common width settings and how they impact block behavior.
Most frequently used styles, including width, are available as GUI (Graphical User Interface) controls in the Style tab. We recommend that you use the block's default, but if you need to make adjustments, go to the Style tab.
The Width field has a dropdown with these options:
| Option | What it does |
Fill | Sets the width to 100% of the container. |
Stretch | Sets the width to auto and stretches the block to fill the available space. |
Hug | Sets the width to auto and shrinks the block to fit its contents, centered. |
Full page width | Sets the width to 100vw so the block spans the whole viewport. This option appears only when the block is roughly centered on the page. |
Remove | Clears the width value. |
Auto width
Auto width helps blocks respond gracefully to variation in screen size. If a block is behaving in unexpected ways, check that its width is auto (or not set) and then check the width of any block within which it is nested. The Width field shows auto for an unset width, Stretch, and Hug. A block with Hug is centered and shrinks to fit its contents; the other two fill the available space.
Percentage width
A block with 100% width makes the block 100% the width of its container. Builder blocks use border-box sizing by default, so the 100% includes the block's padding and border but not its margin. In this case, the block can overflow its container, because the margin makes it too big for the space it's in.
If you need to use a percentage width for a block, be sure to set its margin to 0. If you've changed a block's box-sizing to content-box, set its padding and border to 0 as well. With percentage width, if you still need spacing around the block, put the margin or padding on the containing block that the image is in, not on the block itself.
In addition, check to make sure that the containing block doesn't have a fixed width setting, that is a pixel width. Instead, use width auto or 100%.
The Section block for full width
Use the Section block when you need a section to span the whole screen but you want to limit how wide the content within the Section gets.
Drag and drop a Section block into the work area from the Insert tab. The Section block is unique in that its width is set in vw, or units of viewport width. 100vw, the default Section width, means that the Section spans the entire width of the viewport. The browser window is a common viewport.
While the Section block width is relative to the viewport as long as the width is in the default of vw, the contents of the Section have a maximum width of 1200 pixels by default. This means that you can place other blocks inside the Section block and they won't get bigger than 1200 pixels wide, which is friendly to wide screens.
In the video below, the body content of the page is within a Box block which spans the width of the page. The content is moved within a Section block instead, which limits the width of the page naturally.
What's next
Build upon your understanding by reading Margin and Padding, which covers what margin and padding are, how they affect block width, and when to use them.