Screen Size Presets

Responsive design is usually tested by dragging the browser window until something breaks. The problem is that you rarely stop at the widths people actually use, and it's easy to miss the breakpoint where the layout changes.

Screen size presets take you straight there. Switch between common phone, tablet, laptop, and desktop sizes with one click, or jump directly to your own breakpoints. Instead of searching for the right width, you're already there.

Because Pixy works with your real website, every preset uses your actual CSS. The layout reflows exactly as it will for your visitors. And when you make a change at a specific size, that breakpoint stays part of the edit, so there's no confusion about where the fix belongs.

Device presets are now available in design mode. Four buttons above the page let you switch between desktop, laptop, tablet, and phone widths with a single click: 1440, 1280, 834, and 390 pixels.

You can still resize the page yourself. If you drag to a custom width, Pixy highlights the closest device preset, so it's always easy to see which range you're designing for.

These presets don't simulate a device. They simply resize the page, so your own media queries behave exactly as they would in the browser.