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 change the values in the header. All values can also be easily changed by using the up and down keys when editing them. pixels will increment/ decrement by 10, em's by 1 and zoom by 0.05.

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 sizing or full sizing

By default, Polypane will use viewport sizing 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 havent 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 clicking "(not) viewport aware" in the device preset overlay.

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 out to show the given height.

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

Start a Polypane trial

Improve your web dev workflow

Start free trialView pricing