Start with the exact viewport
Resize the browser until the layout issue appears, then copy the viewport size. Do not rely only on device names because the same device can report different viewport sizes depending on browser UI, orientation, zoom, and split-screen state.
Check breakpoint state
Compare the current viewport width with Tailwind, Bootstrap, or your project’s custom breakpoints. Many bugs happen right around breakpoint boundaries where navigation, grids, cards, or sidebars change layout.
Test orientation and height
Responsive bugs are not only about width. Viewport height matters for full-screen sections, sticky elements, modals, mobile browser chrome, and layouts that use vh, dvh, svh, or lvh units.
Copy a complete report
A strong report should include viewport size, screen resolution, DPR, browser, operating system, orientation, page URL, reproduction steps, expected behavior, and actual behavior.
Bug report template
Copy the browser details from ScreenMetricLab, then add the exact page and reproduction steps.
Page URL:
Viewport:
Screen resolution:
DPR:
Browser / OS:
Orientation:
Expected result:
Actual result:
Steps to reproduce:Checklist
- ✓ Viewport width and height captured
- ✓ DPR captured
- ✓ Browser and OS captured
- ✓ Orientation checked
- ✓ Breakpoint state checked
- ✓ Responsive tester preset checked
- ✓ Steps to reproduce written clearly