screensize.net

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.
Recommended test plan

Current viewport coverage

0px covers 0 of 8 common QA widths; test 360px next.

360px
Narrow Android
needs +360px
393px
Modern iPhone
needs +393px
1366px
Small laptop
needs +1366px
1536px
Large laptop
needs +1536px
TargetScenarioNowStatusTailwindBootstrapQuery
360px
Narrow Android
minimum mobile layout
needs +360pxbasexs
430px
Large phone
Plus / Pro Max portrait
needs +430pxbasexs
1024px
Tablet landscape
Tailwind lg and laptop edge
needs +1024pxlglg

Scenario coverage

Navigation bar

Verify menu collapse, logo fit, action buttons and sticky behavior across phone, tablet and desktop widths.

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.

Workflow

Run a practical responsive QA loop

Start with the live viewport, identify the active breakpoint, then run the scenario checklist for the UI pattern you are changing.

  1. 1
    Check viewport size
  2. 2
    Pick a scenario
  3. 3
    Copy the QA result
Check viewportOpen breakpointsCalculate imagesEmbed in your docs

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