The sign-in form was 778px below the fold

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.

Built with

• CSS
• Headless Chrome
• Puppeteer