MADE BY PWR
Mobile UX case study · Subscription service

The sign-in form was 778px below the fold

A 390 by 844 phone screen drawn to scale: the sign-in form started 778px down and ran past the bottom of the screen, then 120px down.
Both positions read from a headless browser at phone width.

The problem

Mobile users could not find the sign-in form. It rendered far below the viewport and overflowed the screen horizontally, so the page looked broken on a phone.

What we did

Measured the real layout in a headless browser at phone width instead of relying on a responsive preview, then fixed the container and the overflow at the source.

Result

Form reaches the first screen on a 390px viewport with no horizontal overflow.

How it was measured

The layout was measured in a headless browser at 390 by 844 pixels, reading the actual bounding box of the form rather than looking at a responsive preview. That distinction is the whole case: the preview showed a form, and the real viewport put it 778 pixels down the page with the container overflowing sideways. The same measurement was re-run after the fix, which is where the second number comes from.

Built with

  • CSS
  • Headless Chrome
  • Puppeteer