Design & UI Validation

Responsive Design

Manage which device viewports are rendered on the canvas, add custom resolutions, and visualize exactly which CSS breakpoint is active for each frame.

Overview

Complete Viewport Canvas Control

The Responsive Design panel gives you full control over the multi-viewport canvas at the heart of Vispane. You decide which devices are rendered, at what dimensions, and the premium breakpoint scale tells you exactly which CSS media query is active for each frame.

  • Built-In Device Categories: Mobile, Tablet, Laptop, and Desktop presets with industry-standard dimensions (320px, 375px, 768px, 1024px, 1280px, 1440px, 1920px).
  • Category Filtering: Filter the device list by Mobile, Tablet, Laptop, or Desktop to focus on what matters for your current task.
  • Toggle Individual Devices: Enable or disable any specific device with a single click. Only the enabled devices render on the canvas.
  • Custom Device Presets: Define completely custom viewport dimensions (e.g., 320px for very small phones, 3840px for 4K displays).
  • Breakpoint Scale Visualization: A premium visual indicator that maps each active frame's current width to its corresponding CSS breakpoint bucket (xs, sm, md, lg, xl, 2xl).
Pro Tips
💡
Test extreme viewports Add a 320px wide custom device (the smallest supported iPhone viewport) and a 2560px wide device (a large desktop monitor). Edge cases at the extremes of your breakpoint range are where the most layout bugs hide.
💡
Use the breakpoint indicator to verify CSS media queries The breakpoint scale shows you exactly which @media query is active for each device. If a frame shows "md" but your layout looks like "sm", your breakpoint values don't match your intended design system.
💡
Test tablet landscape and portrait separately Add a 768px device (iPad portrait) and a 1024px device (iPad landscape). Many responsive layouts have bugs at one orientation that pass review at the other.