Made in Builder

Made in Builder.io

How to Build: Localization webinar on March 23rd @ 10am PST. Register Now

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Log in

Product

Pricing

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

When a design shifts gracefully from one screen width to another, the design is responsive. A key element in building responsively is using points at which the layout changes to maintain its design integrity. These points, referred to as breakpoints in web development, are viewport widths that commonly include certain device types.

For example, in the following video the Visual Editor uses breakpoints to determine which viewport widths includes small devices, such as phones, medium devices, such as tablets, and larger screens such as monitors and on laptops.

Builder has three built-in breakpoints for planning your layouts:

  • Phone: 0-639px
  • Tablet: 640px-991px
  • Desktop: 992px+

These pixel widths include most of the devices in each category and Builder applies these breakpoints automatically in the Visual Editor.

To make style changes for specific widths, click on the icon for that width and edit the styles. Any time you make changes to a width, those styles apply to that width and smaller. For example, if you make style changes to the tablet view, those changes apply to tablet and phone widths. If you make style changes in phone view, those changes apply only to phones.

In the Visual Editor, hover over the Desktop, Tablet, or Phone icon to display the breakpoints that currently apply to that view.

The image below shows the hover state of the tablet icon with a default breakpoint of 641px to 991px:

Screenshot of Visual Editor with breakpoint icons circled with a note that reads, "Hover over icons to display current breakpoints." The hover state displays the current breakpoints in pixels that are applied to that width.

For information on viewing custom breakpoints, refer to the Viewing custom breakpoints section of the Using Custom Breakpoints documentation.

Refine your use of breakpoints with a solid foundation in responsive techniques. For more information, see:

For information on more granular control over breakpoints in your Builder project, read:


Looking to hire a 3rd party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?