Breakpoint mode and Device View

Two toolbar features change how you work with breakpoints: one lets you set styles for a specific media query without moving the slider, the other shows the result at real device sizes.

Toggle Breakpoints

Breakpoint mode lets you define styles for a particular media query, independent of the slider position.

Disabling all breakpoints means your styles are not tied to any media query at all. That has a practical benefit while you work: you get more room in the working area for setting up your default styles, without the layout jumping around as the slider crosses a breakpoint.

Device View

Device View previews your work across various types of screen, so you can check how content displays on a specific device and decide whether it needs tweaking.

Popular devices come pre-loaded — iPads, iPhones, Kindles, Galaxy phones and more. You can edit that list down to the devices you care about, or enter custom Width and Height values for anything not on it.

Device icons on the slider

Below the add and delete breakpoint buttons sit three device icons, which brighten to indicate the class of device matching the width you’re designing for. They’re covered in full in device icons.

Next steps

• Custom breakpoints — adding and managing the breakpoints themselves
• The width slider — testing every width in between