There are some styles that can be helpful when working with forms on mobile devices.
Font Sizes
The default behavior in iOS is to zoom the browser into a field when a font size < 16px has been specified (or not font size is specified at all). This can be helpful to come users and a distraction to others. To disable this behavior, use the CSS below to set the font size on components that accept text input.
Font Size
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}
Mobile Only
There may be times when a form designer wants to display specific components exclusively to mobile users.
Mobile Only
@media only screen and (min-width:600px) {
.hide-on-desktop {
display: none;
max-height: 0;
overflow: hidden;
}
}