Register now: Best Builder Practices for Marketers & Designers

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

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.

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 following image shows the Style tab for an image with a width set to auto.

Screenshot pointing out where the Style tab is and where the width setting is within the Layout section. The width is set to auto.

👉 Note: Since you can build entire responsive layouts with no code in Builder, this article doesn't cover custom CSS. To add or edit custom CSS on a selected element, you can use the CSS Properties section of the Style tab.

Auto width helps blocks respond gracefully to variation in screen size. If a block is behaving in unexpected ways, check that its width setting is auto and then check the width of any block within which it is nested.

In the following screenshot, the Box that the image is in and the image both have a width of auto, which means both are responsive. The auto width takes into account any margins, padding, or border on the image, which keeps the image from overflowing its container.

A block with 100% width makes the block 100% the width of its container, but doesn't include the margin, padding, or border in the calculation. In this case, the block can overflow its container, because the padding and margin are making it too big for the space it's in.

In the following screenshot, the image is overflowing its containing box. To display the elements and their relationships to one another, turn on X-ray mode, which displays bounding boxes, nesting/hierarchy, margin and padding.

In this screenshot, the Box has a pixel width and the image inside the Box has a 100% width and a margin, which causes the image to be too big for the Box. When this configuration repeats over multiple elements on a page, the layout breaks as the screen size shifts.

If you need to use a percentage width for a block, be sure to set its margins, padding, and border to 0. 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%.

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 preview mode the Section expands to the edges of the browser, while the content stays within its 1200 pixel maximum width.

The following image shows the difference between a Section and a Box. The Section, with its 100 viewport width expands all the way to the edges of the viewport, while the Box is constrained in width by default.

If a block had a width of 50vw, it would be half of the viewport width, regardless of the size. This resembles percentage widths except that the width of vw is relative to the entire viewport, such as the browser window. A percentage width on a block, however, is relative to the parent container, which could be a small part of the viewport. So if you put a viewport width on a block, that block's width is now is calculated based on the viewport size and doesn't reference its parent container.

In the following image, A Section at 100vw is inside of a Box block. The Box block is constrained in width but the Section width does not take into account the width of the Box because the Section width is set in viewport units.

A possible use case for this configuration is if you had a layout where most of the areas of content were constrained but you wanted a section to expand beyond everything else.

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.


Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences