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)

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.

Simplified breakpoints

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.

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

Get Polypane

Building responsive websites is hard.
Polypane makes it easy.

Try for free
Polypane screenshot
By using our site you agree to our privacy policy and disclaimer