/
Mobile Styles

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.

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.  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.

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