Pane sizes

Pane sizes are determined by a number of different values. Dimensions can be set in pixels or in ems. To switch between them, click px in the top right corner of a pane to switch to sizing in em, and click again to switch back. In horizontal mode if you don't set a height, a pane will automatically take the full height of the application.

Resizing panes

Panes get automatically resizes when you select a new preset, but you can also manually type new values in the header. You can also change these value with the arrow keys. Just up/down will change by 1, holding shift alogn with them will change by 10, holding cmd/ctrl will change by 100 and holding alt will change the value by 0.1. These shortcuts also work when scrolling inside an input.

Apart from manually entering numbers, you can also drag-to-resize panes. When hovering over the bottom or right edge of a pane, your cursor will change and a blue area will appear by which you can drag to resize the pane, either horizontally or vertically. In the bottom right corner a dot will appear that lets you resize both dimensions at once.

When resizing, keep shift pressed to maintain a pane's aspect ratio. In horizontal mode, doubleclick on the vertical resizes to make the pane 100% height.

By pressing shift cmd/ctrl n, all visible panes will be randomly resized. This is ideal to do some quick stress-testing of your styling.

Using Device Presets

When creating a pane, or when clicking on its title, an overlay will appear with a number of common devices. You can select one of these by clicking on them, or by using the arrow keys to select the one you want. Polypane will know when your current pane is in landscape or portrait mode, and for devices that support it, will automatically set the dimensions in the same orientation as your current pane.

Read about how to create your own device presets.

Viewport size or Device size

By default, Polypane will use viewport size for devices it knows. This means that the size of the pane is the size your site would be when shown inside a browser on the device, not the full device height. We have custom sizes for all the devices in our list of presets.

The custom viewport sizes have portrait and landscape variants and as long as you haven't manually changed a pane after selecting a preset, we will automatically resize them for you if you switch between portrait and landscape.

You can turn this on and off per pane by toggling betweenm "Viewport Size" and "Device size" in the device preset overlay. This setting will be remembered per pane.

Zooming panes

Sometimes a pane might not fit on your screen. In horizontal mode, the height of a pane is capped at the available height of your screen and your provided height will be ignored. If you want to have the entire pane visible, you can use the zoom value (left of the width) to zoom out. Double clicking this value will automatically zoom the pane so the given height fits the viewport. You can use the arrow keys or scrollwheel to change this value, and the same keyboard shortcuts as for sizes work here too.

Rotating panes

To rotate a pane (to go from portrait to landscape or the other way around), click the rotate icon next to the width and height. You can only rotate panes that have a width and a height defined.

To rotate all panes, press cmd/ctrl alt r or go to the view menu and click "Rotate all panes"

Is your question not answered?
Ask via Twitter, Slack or our contact form

Build your next project with Polypane

  • Try all plans, all features
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Start free trialView pricing
Polypane screenshot