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.
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
down will change by 1, holding
shift alogn with them will change by 10, holding
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.
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.
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.
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