Mobile Styles

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.  There is no need to apply this to a specific component.  It is by default configured to apply to all text and textarea components.

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.  Using the class 'hide-on-desktop' on a component after embedding this style will ensure the component only displays on devices with a mobile screen size.

@media only screen and (min-width:600px) {
	.hide-on-desktop {
		display: none;
		max-height: 0;
		overflow: hidden;
	}
}