Review a form on a small screen before polishing it

A mobile-form review should follow the complete task on a narrow viewport, including typing and errors. A screenshot of an empty form will not reveal a keyboard covering the next field, a sticky footer hiding a message, or a final action pushed out of reach.

Start with real input

Enter long names, addresses, and values similar to what your users provide. Use the appropriate input type and autocomplete values where applicable. Do not restrict names or addresses to a fictional tidy format unless the actual system requires it.

A practical review sheet

The browser viewport emulator is useful, but also test an actual device when practical. On-screen keyboard behavior and touch interaction can differ from a desktop simulation.

Use a simple responsive layout

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.form-grid input { min-width: 0; width: 100%; }
@media (min-width: 48rem) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

This example prevents common grid overflow, but it does not determine the best field order. Keep related information together and preserve the semantic reading order when changing columns.

Review copy and behavior together

A field label that wraps into four lines may indicate unnecessary complexity. A required explanation may need to sit above the input rather than in a tooltip. An error should not require the person to scroll to an unrelated part of the page.

Record the exact viewport, device, starting state, and input that caused a problem. Ask AI for a focused fix based on that evidence. “Make it responsive” is less useful than “The submit button is covered when the keyboard opens on this device.”