# Stop Phones Zooming Into Form Fields

> Sets form fields to at least 16px text so iPhones stop zooming in when a field is tapped, and makes inputs full width on small screens.

- Type: CSS
- Runs: Site-wide header
- Category: [Forms](https://wpide.com/library/category/forms/)
- Tags: forms, mobile, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/form-mobile-friendly-inputs/

## Code

```css
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
    font-size: max(16px, 1em);
}

@media (max-width: 600px) {
    form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    form select,
    form textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}
```

## Notes

Applies to all forms on the front of the site; the full-width rule only kicks in below 600px.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Stop Phones Zooming Into Form Fields" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/