Increase font size for mobile devices

what is the best method to increase the font size for mobile devices?

I have many field users entering data in forms and the text is extremely small for lots of these guys out in the construction field…

I found ways to increase button size - that helps - but is text going to come down to individual phone settings? or is there a better way to control for this using code?

I have both android and iphone users.

thanks!

Hi Tim,

Here’s one method to enlarge the font size for mobile devices.

You can copy/paste this CSS under API & Code > CSS

@media screen and (max-width: 710px) {
  #knack-body {
    font-size: 1.2em;
  }
}

If you want to enlarge the font size on more elements such as text inputs, buttons and so on, you can use this instead:

@media screen and (max-width: 710px) {
  #knack-body, #knack-body button, #knack-body input, #knack-body select, #knack-body textarea, .kn-content--embedded-with-fonts, .kn-content--embedded-with-fonts button, .kn-content--embedded-with-fonts input, .kn-content--embedded-with-fonts select, .kn-content--embedded-with-fonts textarea {
    font-size: 1.2em;
  }
}

Another approach is to increase the zoom of the page, whether manually or through CSS.

Hope this helps!

3 Likes

Thank you! this helped out immensely! I appreciate your time and input

1 Like