Responsive Design

How To Design Responsively In Breakdance

Responsive design is incredibly easy in Breakdance thanks to the various responsive design features.

Previewing Your Design At Smaller Widths

Viewport widths or device sizes are often referred to as “breakpoints” in web design & development.

To preview your design at a specific breakpoint, click the breakpoints dropdown near the top middle of the Breakdance interface.

There, you’ll find a number of default breakpoints to choose from. If you’ve designated any custom breakpoints, they’ll appear as well.

By choosing a breakpoint, the Breakdance design preview panel will adjust its size to the size of that breakpoint, allowing you to see how your design will look at various viewport widths.

Changing Settings On Specific Breakpoints

If a setting needs to be adjusted at a certain breakpoint, you can do that by either selecting the appropriate breakpoint and then making changes, or by using the breakpoint dropdown next to the setting’s label in the Properties panel.

Note that not all settings can be set responsively. To determine which ones can be set responsively on a per-breakpoint basis, look for the breakpoint dropdown next to the setting’s label in the Properties panel. If this isn’t present, the setting cannot be set responsively.

Hiding Elements On Specific Breakpoints

If you want to hide an element only on specific breakpoints, you can do that in the Advanced (gear icon) tab in the Properties panel, under “Hide On Breakpoint.”

There, you can set which specific breakpoints you want the element to be hidden at.