Mobile Styles

Styles that help forms work well on phones and tablets. Add them to a form as described in Using Custom CSS, Option A.

Stop iPhone and iPad from zooming into fields

iOS zooms in when a user taps a field whose text is smaller than 16 pixels. To prevent this, set the text size of input fields to 16 pixels:

<style>
  input[type='text'],
  input[type='number'],
  textarea {
    font-size: 16px;
  }
</style>

This applies to all text, number and text area fields on the form. You don't need to add a class to each component.

Show components only on mobile devices

Add this CSS, then enter hide-on-desktop in a component's Custom CSS Class. The component is shown only on screens narrower than 600 pixels:

<style>
  @media only screen and (min-width: 600px) {
    .hide-on-desktop {
      display: none;
    }
  }
</style>

The component is only hidden from view. If it is a required field, desktop users can't fill it in, so use this for content such as instructions rather than required fields.

Related pages

• Using Custom CSS

• Large Button Styles