Float Mode

This mode lets you drag & drop devices wherever you want in the workspace and set individual or global zoom levels. You can even let the devices overlap.

Document image

While in Responsive View Mode, hover over the Align mode icon and click on Float.

Document image

Resetting device alignment

If your workspace feels disorganized after moving devices around in Float mode, you can realign them to something more orderly.

Open the drawer in the top-left corner of the workspace to see alignment options.

Document image

There are two options to choose from—Align to grid and Align to center. These options work similarly to the Grid and Center Align Modes respectively.

Note that you can still move the devices around freely after using these alignment options—they keep you in Float mode instead of taking you to Grid or Center mode.

Document image

Selection mode

When dealing with overlapping devices in Float mode, you can move a particular device to the top or bottom using Selection mode (think of it as moving a layer above or below another one in Photoshop.)

Open the Float mode drawer in the top left of the workspace, and click on Toggle Selection mode.

Document image

Click on a device, and you'll see the arrow icons ⬆⬇ that you can click to move the device to the top or bottom of the pile.

Document image

Alternatively, select a device and use the ⬆⬇ arrow icons that appear in the drawer when you select a device.

Document image

Selection mode keyboard shortcuts

While in selection mode, you can click to select a device and use the following keyboard shortcuts:

  • Clone device: c
  • Hide device: Backspace
  • Move device to top: Shift+
  • Move device to bottom: Shift+
  • Move device by 1 pixel
    • Windows/Linux: Ctrl+///
    • macOS: Cmd+///
  • Move device by 10 pixels
    • Windows/Linux: Ctrl+Shift+///
    • macOS: Cmd+Shift+///