In modern browsers, every element on a page is a building block. Some blocks are as wide as the viewport, while others are small and might line up in a horizontal row. Blocks can contain things such as text, images, or buttons.
When the screen size changes, the layout of the blocks should change in such a way that the content is still accessible and intentional while the UX remains engaging for the user.
Understanding the concept of how the blocks interact with one another and how settings that affect size, such as width, margin, and padding, influence layout can help you build responsive projects for any screen size–from the largest displays to mini hand-held devices.
The following video shows a Builder page at different sizes to demonstrate how the content shifts.
Everything on a webpage is in what a browser interprets as a box. These boxes, or blocks, can stack on top of one another, line up horizontally, and even nest inside other boxes. Boxes contain elements such as headings, paragraphs, images, videos, forms, buttons, and other boxes.
In web development, this concept is known as the Box Model. The following image of a Builder page shows boxes around the two main sections and boxes nested within those two main boxes.
Different types of boxes have default behaviors that we can change by making style adjustments. Styles affecting position and size that you edit in Builder are specifying real CSS which the browser then uses to determine layout. Because even a minimal page contains lots of boxes, changes to one can sometimes cause cascading effects. If you understand the Box Model, you can use this to your advantage.
The built-in Builder blocks already have styles for responsive layout. You can drag and drop them onto the working area and without any styling at all, they respond automatically to changing screen sizes.
The importance of the Box Model becomes more apparent as layout evolves. As you plan the layout, consider the main boxes and then the smaller boxes inside of them.
The following image is the Builder homepage with each of the elements inside a drawn box. The header at the top is its own box and contains other boxes with the logo, navigation menu, and sign-in button.
The next large box contains the rest of the content in progressively smaller, nested boxes. Though there are many boxes, they are organized into two boxes. Start the layout planning at a high level and after you have the main sections, move to more granular layout.
First, consider the layout in terms of the biggest boxes. At the highest level, this page are two main boxes.
Second, consider the next level of boxes. Here, the big box that encompasses the main content has two boxes within it.
Continue in this way until you've added all of the design elements you would like. Sketch your ideas out before you start so you have a roadmap as you work later.
When your basic layout is ready, you can start building in the Visual Editor. Suppose you have the following layout of a webpage with a header box, and a main box for the body with two boxes side beside each other inside of that box:
At the moment, just focus on the highest level. This example has two big sections. In the Visual Editor, drag in a Box for each main section.
Now consider the detail. In the main body, there are two boxes side by side. Rather than dragging in two boxes and trying to adjust their styles, think of side-by-side content like this as columns. Drag in a Columns block and drop it within the second box.
If you use Builder's Columns block for side-by-side layout, the structure is automatically responsive. which frees you up to focus on the design and content. You can use multiple Columns blocks throughout a layout to quickly set up a modern, responsive layout that's ready for content.
Continue with this method until you've completed the layout. This approach has several advantages:
- You save yourself time by organizing the layout. If you instead didn't use any boxes to organize different areas, and put all items loose on the page, you could inadvertently affect layout in unexpected ways that could be challenging to correct.
- Boxes help divide the layout process into manageable chunks. A box scopes the layout tasks and you can work on them somewhat independently of one another.
- Understanding which section needs attention when fixing responsiveness issues becomes more readily apparent.
The default width settings on Builder create a responsive block automatically in most cases. If you're building your projects according to best practices, blocks in Builder require little additional styling to make them responsive.
Some of those best practices include:
- ⚠️ Avoid pixel widths, which is fixed and inflexible. Refer to How Width Affects Layout for more information.
- ⚠️ Avoid use of absolute positioning. Absolute positioning has specific use cases, but isn't suited for whole page layout. If you use it on many items in your layout, the layout won't be responsive.
- ✅ Organize layouts into sections.
- ✅ Place elements and content inside of a containing block, such as a Box, Section, or Columns, which are are responsive by default.
- ✅ Rely on Builder's built-in styles to get a responsive layout started.
- ✅ Use auto or percentage widths if you need to change a default width setting.
- ✅ Use the Columns block for side-by-side content.
- ✅ Use the Alignment section of the Style tab to move items within their parent container. By using the Alignment options, you ensure that the items placement is more likely to be responsive. To preserve the integrity of your layout, prefer Alignment over specifying position manually.
When you set a width in pixels, or px, browsers keep that width, regardless of screen size. While there are cases where a pixel width might be appropriate for a block, most of the time auto or a percentage, such as 100%, provide a better result.
The Box Model is foundational for understanding responsive layout. To go understand how the Box Model works block width check out How Width Affects Layout.
