RESPONSIVE REPAIR — DEMONSTRATION QA REPORT
Prepared October 7, 2026. Synthetic project, AI-assisted; not paid client work.
Source: responsive-fix-demo.html. Open directly in a browser; no dependencies.

ISSUE D-01: Fixed-width content overflows narrow screens
Reproduce: select Before at a 375px browser viewport.
Expected: all page content fits horizontally and remains readable.
Observed: document scroll width 1056px; viewport 375px.
Cause: 1040px hero width, fixed column widths and three fixed 330px cards.
Repair: fluid hero, minmax(0,1fr) card columns, one-column layout below 700px.

ISSUE D-02: Small call-to-action
Before mode intentionally uses 3px vertical padding.
Repair: 12px vertical padding, narrow-screen minimum height 44px.
Verified repaired rendered height: approximately 48.8px.

ISSUE D-03: Long card text
Repair: overflow-wrap:anywhere prevents unbroken text from forcing card overflow.

BROWSER VERIFICATION
After mode: viewport / document scroll width
375 / 360px — no horizontal overflow
768 / 753px — no horizontal overflow
1280 / 1265px — no horizontal overflow
The 15px difference is the browser scrollbar area.
Before and After switches changed the visible mode as expected.
Service-details link navigated to #details.
Browser error logs were empty at verification time.
Mobile viewport screenshot visually inspected; text, CTA and illustration fit.
Evidence: demo-before.png and demo-after.png.

LIMITS
One browser engine and synthetic content. No physical-device, Safari, payment,
backend, performance benchmark or live deployment testing claimed.
Focus outline exists in source; complete keyboard/accessibility audit not performed.

APPLICATION EXCERPT
I can reproduce a responsive issue, make a focused HTML/CSS/JavaScript patch,
and provide before/after evidence plus a regression checklist. My attached
sample is a synthetic AI-assisted demonstration, not a previous client project.
Please share the affected URL, expected behavior and source access so I can
confirm scope and timing before starting.