Preview on mobile and tablet

The header includes view mode buttons so you can see how the form fits Desktop, Mobile, or Tablet widths. On mobile and tablet, an Orientation control toggles portrait and landscape.

Device modes provide an approximate layout preview, not a complete emulation of a specific browser or device. Test the finished form on a real phone or tablet before handoff.

Choose a device mode

Header device mode selector highlighted with Desktop, Mobile, and Tablet buttons; Mobile selected.Header device mode selector highlighted with Desktop, Mobile, and Tablet buttons; Mobile selected.
  1. In the center header, find the device buttons (tooltips: Desktop, Mobile, Tablet).
  2. Click Mobile or Tablet.
  3. The canvas width changes to match that profile.

You can switch modes in Edit or Preview.

Toggle orientation (mobile / tablet only)

Tablet mode selected with the Orientation rotate control highlighted to the left of the device buttons.Tablet mode selected with the Orientation rotate control highlighted to the left of the device buttons.
  1. With Mobile or Tablet active, click Orientation (rotate icon).
  2. Compare portrait and landscape layouts.
  3. Confirm labels, buttons, and multi-column stacks do not overlap or clip.

Test interactions

Preview mode on a narrow mobile width.Preview mode on a narrow mobile width.
  1. Click Preview.
  2. At the narrow width, click through each field, picker, and submit button.
  3. Repeat on a real phone or tablet: tap controls, scroll the page, open the on-screen keyboard, and submit the form.
  4. Note any field that is hard to tap or read.

Check the result

  • Active device button is highlighted.
  • Form content reflows inside the simulated width.

Summary

Use Desktop / Mobile / Tablet in the header for an approximate width check. Orientation applies on mobile and tablet only. Run Preview mode tools and test on a real device representative of the devices your users have.

See also