{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/pane-sizes/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Pane sizes\"\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `There are a number of different ways to set the size of panes and you are free to use whichever method works best for you: dragging to resize, selecting device preset, using your CSS breakpoints, switching between workspaces or manually filling in values.`), mdx(\"h2\", {\n    \"id\": \"resizing-panes-manually\"\n  }, `Resizing panes manually`), mdx(\"p\", null, `There are two ways to set a pane size manually: You can type new values in the header or resize them by dragging.`), mdx(\"img\", {\n    src: panesize2,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `When editing the sizes in the header you can also change them with the arrow keys. When using the arrow keys, the pane size will be updated in real-time.`), mdx(\"p\", null, `Arrow up and down will change by 1, holding `, mdx(ShortCutDisplay, {\n    shiftKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` will change by 10, holding `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` will change by 100 and holding `, mdx(ShortCutDisplay, {\n    altKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` will change the value by 0.1 (useful when panes are sized in EMs). These shortcuts also work when scrolling.`), mdx(\"p\", null, `If you've typed a value or accidentally cleared the input, press `, mdx(ShortCutDisplay, {\n    letter: \"Esc\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` to revert to the current value.`), mdx(\"p\", null, `When hovering over the bottom or right edge of a pane, your cursor will change and a draggable bar will appear by which you can drag to resize the pane, either horizontally or vertically. In the bottom right corner a curved bar will appear that lets you resize both dimensions at once.`), mdx(\"video\", {\n    src: paneresize,\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `When resizing, hold `, mdx(ShortCutDisplay, {\n    shiftKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` to maintain a pane's aspect ratio. In horizontal mode you can double click on the resize bar at the bottom of the pane to make it fill to the available height.`), mdx(\"h3\", {\n    \"id\": \"randomly-resizing-all-panes\"\n  }, `Randomly resizing all panes`), mdx(\"p\", null, `Press `, mdx(ShortCutDisplay, {\n    shiftKey: true,\n    cmdKey: true,\n    letter: \"n\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` to resize all panes randomly. This is ideal to do some quick stress-testing of your styling.`), mdx(\"h3\", {\n    \"id\": \"clipping-in-horizontal-mode\"\n  }, `Clipping in horizontal mode`), mdx(\"p\", null, `Panes in horizontal mode are automatically clipped to the height of the application to prevent vertical scrolling. We do this because additional vertical scrolling would make it hard to get the correct overview and when designing responsive websites you will mostly care about the width and not the height, since there is no fold on the web.`), mdx(\"p\", null, `If you leave the height open the pane will automatically take the full available height and resize along with the app.`), mdx(\"h2\", {\n    \"id\": \"using-device-presets\"\n  }, `Using Device Presets`), mdx(\"p\", null, `With the title of a pane selected, an overlay will appear with a list of common devices. These device presets contain full `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/\"\n  }), `device emulation`), ` settings, and can be set to the viewport size (inside a mobile browser) or device size (full pixel dimension). You can find more details on how the device presets work here: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/device-presets/\"\n  }), `device presets`), `.`), mdx(\"img\", {\n    src: devicepresets,\n    alt: \"device preset dropdown\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"using-workspaces\"\n  }, `Using workspaces`), mdx(\"p\", null, `You can use the workspaces in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/workspaces/\"\n  }), `Workspace panel`), ` to replace your current set of panes (or append the workspace to the currently list of panes).`), mdx(\"h2\", {\n    \"id\": \"zooming-panes\"\n  }, `Zooming panes`), mdx(\"img\", {\n    src: panesize3,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `To the left of the pane dimensions is a percentage value that lets you zoom out an individual pane (to zoom out all panes, use the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/global-zoom/\"\n  }), `global zoom`), `). This is useful for when you want to see a pane that's larger than your own screen, or when you need to work on a small screen that you want to make larger so you can more easily see it.`), mdx(\"p\", null, `Double clicking this value will automatically zoom the pane so the given height fits the viewport. While interacting with the zoom percentage you can use the arrow keys to increase and decrease by 1 and hold `, mdx(ShortCutDisplay, {\n    shiftKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), `, `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` and `, mdx(ShortCutDisplay, {\n    altKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` to increase/decrease by 10, 100 and 0.1 respectively (just like for the pane dimensions). If you've typed a value or accidentally cleared the input, press `, mdx(ShortCutDisplay, {\n    letter: \"Esc\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` to revert to the current value.`), mdx(\"h2\", {\n    \"id\": \"rotating-panes\"\n  }, `Rotating panes`), mdx(\"p\", null, `To rotate a pane (to go from portrait to landscape or the other way around), hover over the pane header to show the rotate icon (a device either in lanscape or portrait, depending on the pane's dimensions) Click it to rotate the pane.`), mdx(\"p\", null, `You can only rotate panes that have both a width and a height defined.`), mdx(\"p\", null, `To rotate all panes, press `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    altKey: true,\n    letter: \"r\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` or go to the view menu and click \"Rotate all panes\".`), mdx(\"h2\", {\n    \"id\": \"using-ems-instead-of-pixels\"\n  }, `Using ems instead of pixels`), mdx(\"p\", null, `Pane sizes can be set in pixels or in ems and to switch between them you can click `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `px`), ` in the top right corner of a pane to switch to sizing in `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `em`), `, and click again to switch back. Switching to ems will also update the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/rulers-grids-and-guides/\"\n  }), `rulers`), ` and are particularly nice if you also `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/responsive-design-ground-rules/#rule-4-use-ems-in-your-media-queries\"\n  }), `use ems for your media queries`), `.`), mdx(\"img\", {\n    src: panesize1,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":3,"excerpt":"There are a number of different ways to set the size of panes and you are free to use whichever method works best for you: dragging to…","frontmatter":{"title":"Pane sizes","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Polypane Peek","nextSlug":"/docs/polypane-peek/","prevTitle":"Network panel","prevSlug":"/docs/network-panel/","slug":"/docs/pane-sizes/","date":null,"ogFileName":"pane-sizes"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/docs/1-password-setup-instructions/"},"frontmatter":{"title":"1Password setup instructions"}}},{"node":{"fields":{"slug":"/docs/accessibility-audit-workflow/"},"frontmatter":{"title":"Accessibility audit workflow"}}},{"node":{"fields":{"slug":"/docs/accessibility-overview/"},"frontmatter":{"title":"Accessibility overview"}}},{"node":{"fields":{"slug":"/docs/accessibility-panel/"},"frontmatter":{"title":"Accessibility panel"}}},{"node":{"fields":{"slug":"/docs/application-folder/"},"frontmatter":{"title":"Application folder"}}},{"node":{"fields":{"slug":"/docs/brand-guidelines/"},"frontmatter":{"title":"Brand guidelines"}}},{"node":{"fields":{"slug":"/docs/breakpoints/"},"frontmatter":{"title":"Breakpoints"}}},{"node":{"fields":{"slug":"/docs/browse/"},"frontmatter":{"title":"Browse"}}},{"node":{"fields":{"slug":"/docs/browser-extensions/"},"frontmatter":{"title":"Browser extensions"}}},{"node":{"fields":{"slug":"/docs/browser-features/"},"frontmatter":{"title":"Browser features"}}},{"node":{"fields":{"slug":"/docs/browsersync-and-polypane/"},"frontmatter":{"title":"Browsersync and Polypane"}}},{"node":{"fields":{"slug":"/docs/color-picker/"},"frontmatter":{"title":"Color Picker"}}},{"node":{"fields":{"slug":"/docs/command-bar/"},"frontmatter":{"title":"Command Bar"}}},{"node":{"fields":{"slug":"/docs/command-line-options/"},"frontmatter":{"title":"Command line options"}}},{"node":{"fields":{"slug":"/docs/configuring-logitech-mouses/"},"frontmatter":{"title":"Configuring Logitech mouses"}}},{"node":{"fields":{"slug":"/docs/configuring-webstorm-to-work-with-polypane/"},"frontmatter":{"title":"Configuring WebStorm to work with Polypane"}}},{"node":{"fields":{"slug":"/docs/console/"},"frontmatter":{"title":"Console"}}},{"node":{"fields":{"slug":"/docs/customizing-polypane/"},"frontmatter":{"title":"Customizing Polypane"}}},{"node":{"fields":{"slug":"/docs/dark-and-light-mode/"},"frontmatter":{"title":"Dark and light mode"}}},{"node":{"fields":{"slug":"/docs/data-processing-agreement/"},"frontmatter":{"title":"Data Processing Agreement"}}},{"node":{"fields":{"slug":"/docs/debug-tools/"},"frontmatter":{"title":"Debug tools"}}},{"node":{"fields":{"slug":"/docs/detecting-polypane/"},"frontmatter":{"title":"Detecting Polypane"}}},{"node":{"fields":{"slug":"/docs/developer-tools/"},"frontmatter":{"title":"Developer tools"}}},{"node":{"fields":{"slug":"/docs/device-presets/"},"frontmatter":{"title":"Device presets"}}},{"node":{"fields":{"slug":"/docs/devtools-panel/"},"frontmatter":{"title":"Devtools Panel"}}},{"node":{"fields":{"slug":"/docs/elements-panel/"},"frontmatter":{"title":"Elements Panel"}}},{"node":{"fields":{"slug":"/docs/emulation/"},"frontmatter":{"title":"Emulation"}}},{"node":{"fields":{"slug":"/docs/experimental-chromium-features/"},"frontmatter":{"title":"Experimental Chromium features"}}},{"node":{"fields":{"slug":"/docs/find-elements/"},"frontmatter":{"title":"Find elements"}}},{"node":{"fields":{"slug":"/docs/form-autofill/"},"frontmatter":{"title":"Form autofill"}}},{"node":{"fields":{"slug":"/docs/global-zoom/"},"frontmatter":{"title":"Global zoom"}}},{"node":{"fields":{"slug":"/docs/helper-extension-for-other-browsers/"},"frontmatter":{"title":"Helper extension for other browsers"}}},{"node":{"fields":{"slug":"/docs/horizontal-overflow/"},"frontmatter":{"title":"Horizontal overflow detection"}}},{"node":{"fields":{"slug":"/docs/integrations/"},"frontmatter":{"title":"Integrations"}}},{"node":{"fields":{"slug":"/docs/intro-to-panel/"},"frontmatter":{"title":"Intro to panel"}}},{"node":{"fields":{"slug":"/docs/intro-to-panes/"},"frontmatter":{"title":"Intro to panes"}}},{"node":{"fields":{"slug":"/docs/json-and-xml-viewer/"},"frontmatter":{"title":"JSON and XML viewer"}}},{"node":{"fields":{"slug":"/docs/known-issues/"},"frontmatter":{"title":"Known issues"}}},{"node":{"fields":{"slug":"/docs/layout-debugging/"},"frontmatter":{"title":"Layout debugging"}}},{"node":{"fields":{"slug":"/docs/layouts/"},"frontmatter":{"title":"Layouts"}}},{"node":{"fields":{"slug":"/docs/link/"},"frontmatter":{"title":"Share panel"}}},{"node":{"fields":{"slug":"/docs/list-of-shortcuts/"},"frontmatter":{"title":"List of shortcuts"}}},{"node":{"fields":{"slug":"/docs/live-auto-reloading/"},"frontmatter":{"title":"Live/auto reloading"}}},{"node":{"fields":{"slug":"/docs/making-screenshots/"},"frontmatter":{"title":"Making screenshots"}}},{"node":{"fields":{"slug":"/docs/measure-text-length/"},"frontmatter":{"title":"Measure text length"}}},{"node":{"fields":{"slug":"/docs/mental-model/"},"frontmatter":{"title":"Mental model of Polypane's browser contexts"}}},{"node":{"fields":{"slug":"/docs/message-bus/"},"frontmatter":{"title":"Message Bus"}}},{"node":{"fields":{"slug":"/docs/meta-information/"},"frontmatter":{"title":"Meta information"}}},{"node":{"fields":{"slug":"/docs/network-panel/"},"frontmatter":{"title":"Network panel"}}},{"node":{"fields":{"slug":"/docs/other-tools/"},"frontmatter":{"title":"Polypane and local servers"}}},{"node":{"fields":{"slug":"/docs/outline-panel/"},"frontmatter":{"title":"Outline Panel"}}},{"node":{"fields":{"slug":"/docs/pane-management/"},"frontmatter":{"title":"Manage panes"}}},{"node":{"fields":{"slug":"/docs/pane-sizes/"},"frontmatter":{"title":"Pane sizes"}}},{"node":{"fields":{"slug":"/docs/performance/"},"frontmatter":{"title":"Performance"}}},{"node":{"fields":{"slug":"/docs/pitching-polypane/"},"frontmatter":{"title":"Pitching Polypane"}}},{"node":{"fields":{"slug":"/docs/polypane-peek/"},"frontmatter":{"title":"Polypane Peek"}}},{"node":{"fields":{"slug":"/docs/portal/"},"frontmatter":{"title":"Polypane Portal"}}},{"node":{"fields":{"slug":"/docs/projects/"},"frontmatter":{"title":"Projects"}}},{"node":{"fields":{"slug":"/docs/recording/"},"frontmatter":{"title":"Recording"}}},{"node":{"fields":{"slug":"/docs/reference-image/"},"frontmatter":{"title":"Reference image"}}},{"node":{"fields":{"slug":"/docs/reload-css/"},"frontmatter":{"title":"Reload CSS"}}},{"node":{"fields":{"slug":"/docs/responsive-debugging-workflow/"},"frontmatter":{"title":"Responsive debugging workflow"}}},{"node":{"fields":{"slug":"/docs/review-and-approval-by-it-and-security/"},"frontmatter":{"title":"Review and approval by IT and Security"}}},{"node":{"fields":{"slug":"/docs/rulers-grids-and-guides/"},"frontmatter":{"title":"Rulers, grids and guides"}}},{"node":{"fields":{"slug":"/docs/sales-and-procurement/"},"frontmatter":{"title":"Sales and Procurement"}}},{"node":{"fields":{"slug":"/docs/security-policy/"},"frontmatter":{"title":"Security Policy"}}},{"node":{"fields":{"slug":"/docs/security/"},"frontmatter":{"title":"Security"}}},{"node":{"fields":{"slug":"/docs/session-management/"},"frontmatter":{"title":"Session management"}}},{"node":{"fields":{"slug":"/docs/setup/"},"frontmatter":{"title":"Setup"}}},{"node":{"fields":{"slug":"/docs/showing-multiple-urls/"},"frontmatter":{"title":"Showing multiple URLs"}}},{"node":{"fields":{"slug":"/docs/simulators/"},"frontmatter":{"title":"Simulators"}}},{"node":{"fields":{"slug":"/docs/snippets/"},"frontmatter":{"title":"Snippets"}}},{"node":{"fields":{"slug":"/docs/social-card-and-open-graph-workflow/"},"frontmatter":{"title":"Social card and Open Graph workflow"}}},{"node":{"fields":{"slug":"/docs/source-panel/"},"frontmatter":{"title":"Source panel"}}},{"node":{"fields":{"slug":"/docs/storage-panel/"},"frontmatter":{"title":"Storage panel"}}},{"node":{"fields":{"slug":"/docs/switching-to-polypane/"},"frontmatter":{"title":"Switching to Polypane"}}},{"node":{"fields":{"slug":"/docs/synced-interactions/"},"frontmatter":{"title":"Synced interactions"}}},{"node":{"fields":{"slug":"/docs/tab-customization/"},"frontmatter":{"title":"Tab customization"}}},{"node":{"fields":{"slug":"/docs/team-workflows/"},"frontmatter":{"title":"Team workflows"}}},{"node":{"fields":{"slug":"/docs/ui-overview/"},"frontmatter":{"title":"Polypane UI overview"}}},{"node":{"fields":{"slug":"/docs/web-vitals/"},"frontmatter":{"title":"Web Vitals"}}},{"node":{"fields":{"slug":"/docs/website-issues-you-could-encounter/"},"frontmatter":{"title":"Website issues you could encounter"}}},{"node":{"fields":{"slug":"/docs/workspace-management/"},"frontmatter":{"title":"Workspace management"}}},{"node":{"fields":{"slug":"/docs/workspaces/"},"frontmatter":{"title":"Workspaces"}}}]}},"pageContext":{"slug":"/docs/pane-sizes/"}},"staticQueryHashes":["4164364741","425175329"]}