Navigation bar
Verify menu collapse, logo fit, action buttons and sticky behavior across phone, tablet and desktop widths.
Responsive Design Testing
Use real UI scenarios, live viewport status and copyable QA checklists to test responsive layouts more systematically.
Live viewport Scenario checklists Common QA widths
Responsive testing scenarios
Choose a real UI pattern and copy a focused QA checklist for the current viewport.
Scenario
Navigation bar
Verify menu collapse, logo fit, action buttons and sticky behavior across phone, tablet and desktop widths.
- Primary actions remain visible or move into the menu intentionally.
- No label wraps inside compact icon or nav buttons.
- Sticky headers do not hide anchor targets after scrolling.
| Target | Scenario | Now | Tailwind | Bootstrap | Query |
|---|---|---|---|---|---|
| 360px | Narrow Android minimum mobile layout | needs +360px | base | xs | |
| 430px | Large phone Plus / Pro Max portrait | needs +430px | base | xs | |
| 1024px | Tablet landscape Tailwind lg and laptop edge | needs +1024px | lg | lg |
Scenario coverage
Card grid
Check grid column changes, card height rhythm and media cropping at common responsive thresholds.
Pricing table
Compare stacked, two-column and desktop plans while keeping prices and calls to action easy to scan.
Form layout
Validate input widths, label placement, keyboard viewport behavior and error message wrapping.
Modal
Check dialog width, vertical overflow, close affordances and focusable controls on small screens.
Image gallery
Test thumbnail grids, lightbox transitions and responsive image sources across DPR-sensitive breakpoints.
Data table
Validate horizontal scroll, sticky columns, row density and filter controls before shipping data-heavy views.
Dashboard/sidebar
Check sidebar collapse, dense controls, charts and secondary panels in operational layouts.
A practical responsive QA loop
Start with the live viewport size, identify the active framework breakpoint, then run the scenario checklist for the part of the UI you are changing. For image-heavy layouts, verify the source sizes in the responsive image calculator.
Frequently asked questions
› What viewport widths should I test for responsive design?
Start with 360px, 393px, 430px, 768px, 1024px, 1366px, 1536px and 1920px. Then add the exact widths where your layout changes.
› Should I test devices or breakpoints?
Test both. Breakpoints catch layout transitions, while real device viewport widths catch common phone and tablet cases.
› Why use scenarios instead of only resizing the browser?
Scenarios turn resizing into a checklist: navigation, cards, forms, modals and data tables tend to fail in different ways.
Related tools
Viewport Size Checker
See your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
Responsive Breakpoint Checker
Check the current responsive breakpoint live, compare Tailwind and Bootstrap defaults, and copy media queries for common viewport widths.
Responsive Image Calculator
Calculate responsive image export sizes from CSS pixels and DPR. Generate srcset, sizes and CSS image-set snippets for crisp images.
Screen Resolution Checker
Check your screen resolution instantly. See your display's pixel dimensions, available screen area and orientation, and learn what resolution means.