Polypane automatically detects the width-based breakpoints defined in your CSS. You can create panes for each breakpoint by clicking the breakpoints button in the top right of the screen, or by pressing
cmd/ctrl b. These panes are ordered ascending by width (smallest first), and the height will be generated depending on the width, with portrait layouts for mobile sizes and landscape for desktop sizes.
Inside the button you can see how many responsive sizes are defined in your CSS (and thus how much panes are created). This corresponds to the number of unique widths. Polypane adds panes at the beginning and end of the list if it detects that your CSS is also applied outside of these bounds.
Some sites might have a dozen or more breakpoints. Often it's not needed to show all of these. To get a simplified overview of all your breakpoints, right click on the icon and click "Simplified". That will create 5 panes between your smallest and widest breakpoints so you still get a good overview.
By default, the breakpoints and simplified breakpoints options will replace the current set of panes. The right-click menu additionally has options to append them to the panes currently visible.
List of site breakpoints
Right clicking on the breakpoints button in the header shows all the breakpoints found in the site (unless there are too many to display) and you can also choose to add them one by one, or see the list without needing to overwrite all your panes.
Is your question not answered?
Ask via Twitter, Slack or our contact form