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:
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:
- The Box Model
- How Width Affects Layout
- The Changing styles by device type section of Margins and Padding
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.