Made in Builder

Made in Builder

Webinar 👉 Visually Build at Scale with Builder.io & Netlify on 12/1

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

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

Using Breakpoints to Build Responsively

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 uses breakpoints by default, but if you want to customize breakpoints, you must:

Builder's default breakpoints

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.

Customizing breakpoints

While the default breakpoints work for most use cases, you can specify your own custom breakpoints.

Changes you make to your breakpoint settings affect all content in a whole Space, though in order for the breakpoints to apply to a particular content entry, you must publish/re-publish that content entry.

To use custom breakpoints, you must:

Supported SDKs for custom breakpoints

The following table lists the SDKs you can use custom breakpoints with as well as supported versions and NPM packages.

SDKVersionNPM Package

React

≥ 2.0.9

@builder.io/react

Qwik

≥ 0.0.31

@builder.io/sdk-qwik

React Native

≥ 0.0.13

@builder.io/sdk-react-native

Solid

≥ 0.0.21

@builder.io/sdk-solid

Svelte

≥ 0.0.7

@builder.io/sdk-svelte

Vue

≥ 0.0.5

@builder.io/sdk-vue

To set and use custom breakpoints:

  1. Go to Account Settings.
  2. Click on the pencil icon next to Customize Breakpoints.
  3. Edit the breakpoints using pixels.
  4. Click Update Breakpoints to save your changes.
  5. Publish or re-publish content entries that you'd like to apply the new custom breakpoints to.

Alternatively, if you are using a supported SDK, you can access the Custom Breakpoints dialogue from within the Visual Editor by clicking on the Custom Breakpoints icon next to the icons for mobile and desktop views in the top bar. Click on Customize Breakpoint Settings to edit the breakpoints as above.

The image below shows the Customize Breakpoints dialogue in Account Settings.

Tip: The Custom Breakpoints dialogue is always accessible in Account Settings; however, you must be using a supported SDK to use the breakpoints in the Visual Editor.

Viewing breakpoints

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

When there are custom breakpoints applied to a view, Builder displays a small blue dot to the upper right of the view's icon.

The image below shows the hover state of the tablet icon with a custom breakpoint of 600px to 909px:

If you're using a supported SDK, Builder displays a dropdown arrow that you can click to open the Customize Breakpoints panel. Here, you can view the current breakpoints and click the Customize Breakpoints Settings button to access and edit the settings.

Restoring default breakpoints

  1. Go to Account Settings.
  2. Click on the pencil icon next to Customize Breakpoints.
  3. Click Restore Default Breakpoints.
  4. Click Update Breakpoints.

Any changes you make to the breakpoints affects all content entries in a space. However, you must publish any content entries in which you'd like to use the updated breakpoints.

Next Steps

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


Need Expert help?

Reach out to us, and we will match you with a Builder expert.

Connect with us

Was this article helpful?