Made in Builder.io

Join us for the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

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.

When creating Pages and Sections in the Visual Editor, you can preview and edit your work for desktop, tablet, and phone.

  1. Click on the device icon you'd like to preview at the top center of the Visual Editor work area.
  2. Make edits as needed. For example, if a heading font size is too large only on phone, reduce the font size while displaying the phone viewport width.
  3. Publish so your updates take effect on your live site.

Tip: When you change styles on a screen size, the change applies that screen width and smaller, but do not affect the larger screen sizes. In this way, you can fine-tune the styles for smaller devices without changing styles for wider screens.

In the following video, the font size is changed at the Phone and Tablet widths. Then the different widths are displayed to show that smaller-screen styles apply at those widths only.

The Mobile Sidecar Preview helps you keep the mobile experience in mind when working in the default Desktop view.

To open Mobile Sidecar Preview:

  1. Click Change layout editor icon.
  2. Select Mobile Sidecar Preview.
  3. Continue working in the Visual Editor as usual. When you click on an element, the phone preview scrolls to the selected element.
  4. To make changes in Phone view, follow the instructions in the previous section, Editing content at different breakpoints.

To close Mobile Sidecar Preview:

  1. Click Change layout editor icon.
  2. Select Auto, Always Two Column, or Always Three Column.

The following video shows opening, working in the Visual Editor, and closing the Mobile Sidecar preview.

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 third 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?

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

Get the latest from Builder.io

Newsletter

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy