> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/atd-knack-operations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/atd-knack-operations/knack-code/mobile-optimization.md).

# CODE: Mobile Optimization

Navigate to the bottom of this article if you would like to copy and paste the entire mobile template

## Form Views

### Increase size of form submit buttons

```
    /* Increase size of buttons with type="submit" */
  button[type="submit"] {
    height: 64px !important;
    font-size: 32px !important;
    min-width: fit-content;
    width: 100%;
  }
```

### Increase font size for form field labels

```
 /* Increase font size of form field labels */
  .kn-label {
    font-size: 22px;
  }

  .kn-detail-body {
    font-size: 22px;
  }
  
  .kn-read-only {
    font-size: 22px;
  }
```

### Increase height of text fields

```
/* Increase height of text fields */
  input[type="text"] {
    height: 48px !important;
    font-size: 22px !important;
  }
```

### Increase height of email fields

```
/* Increase height of email fields */
  input[type="email"] {
    height: 48px !important;
    font-size: 22px !important;
  }
```

### Increase font size of checkbox options

```
 /* Increase font size of checkbox options */
  .option.checkbox {
    font-size: 22px;
  }
```

## Screen Selection

### Increase size of back links at bottom of pages

```
 /* Increase size of back links at bottom of pages */
  a.ang-link {
      font-size: 22px !important;
  }
```

### Increase height of selected fields

```
/* Increase height of select fields */
  .chzn-single {
    height: 48px !important;
  }

  .kn-select {
    height: 48px !important;
  }

  select {
    height: 48px !important;
    font-size: 22px !important;
  }
```

### Increase height of container surrounding selected fields

```
/* Increase height of container surrounding select fields */
  .chzn-container {
    height: 48px;
    font-size: 22px !important;
  }

  .chzn-container > a > span {
    font-size: 22px !important;
  }

  /* Increase font size of dropdown text in select fields */
  .chzn-drop {
    font-size: 22px !important;
  }
```

## FA Icons

### Increase size of Font Awesome icons

```
  /* Increase size of Font Awesome icons */
  .icon .fa {
      font-size: 22px !important;
  }
```

## Buttons

### Increase size of search button

```
 /* Increase size of search button */
  .kn-button.search {
    height: 48px;
  }   
```

### Increase default menu button size

```
/* Increase default menu button size */
  .kn-button
  {
    height: 48px !important;
    font-size: 22px !important;
  }
```

### Increase default size of "Choose File" button

```
/* Increase font size of Choose File button */
  input[type="file"] {
    height: 48px !important;
    font-size: 22px !important;
}
.custom-file-upload {
    border: 3px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
```

## **CSS Full Template**

This code block has all the CSS knack form changes in it. Can copy and paste into CSS editor in Knack and will see the changes in the mobile environment.

```
/*********************************/
/********* Mobile Styling ********/
/*********************************/
@media (max-width: 800px) {

/* Form Views */
  /* Increase size of buttons with type="submit" */
  button[type="submit"] {
    height: 64px !important;
    font-size: 32px !important;
    min-width: fit-content;
    width: 100%;
  }
  /* Increase font size of form field labels */
  .kn-label {
    font-size: 22px;
  }
  .kn-detail-body {
    font-size: 22px;
  }
  .kn-read-only {
    font-size: 22px;
  }
  /* Increase height of text fields */
  input[type="text"] {
    height: 48px !important;
    font-size: 22px !important;
  }
  /* Increase height of email fields */
  input[type="email"] {
    height: 48px !important;
    font-size: 22px !important;
  }
   /* Increase font size of checkbox options */
  .option.checkbox {
    font-size: 22px;
  }
 /* Increase font size of Choose File button */
  input[type="file"] {
    height: 48px !important;
    font-size: 22px !important;
  }
  .custom-file-upload {
    border: 3px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
  }

/* Screen Selection */
  /* Increase size of back links at bottom of pages */
  a.ang-link {
      font-size: 22px !important;
  }
  /* Increase height of selected field */
  .chzn-single {
    height: 48px !important;
  }
  .kn-select {
    height: 48px !important;
  }
  select {
    height: 48px !important;
    font-size: 22px !important;
  }
  /* Increase height of container surrounding selected field */
  .chzn-container {
    height: 48px;
    font-size: 22px !important;
  }
  .chzn-container > a > span {
    font-size: 22px !important;
  }
  /* Increase font size of dropdown text in selected field */
  .chzn-drop {
    font-size: 22px !important;
  }

/* FA Icons */
  /* Increase size of Font Awesome icons */
  .icon .fa {
      font-size: 22px !important;
  }

/* Buttons */
  /* Increase size of search button */
  .kn-button.search {
    height: 48px;
  }
   /* Increase default menu button size */
  .kn-button
  {
    height: 48px !important;
    font-size: 22px !important;
  }

}/* End Mobile Styling */
```

### Active in these Applications

| Mobile Code       | TDS | RPP | Data Tracker | Signs & Markings | Banners | ROW | DTS | HR | Finance | Parking Enterprise | VZA | SMO | Visitor Sign In |
| ----------------- | --- | --- | ------------ | ---------------- | ------- | --- | --- | -- | ------- | ------------------ | --- | --- | --------------- |
| Submit Buttons    | No  | Yes |              | Yes              |         | No  |     |    |         |                    |     |     |                 |
| Form Labels       | No  | Yes |              | Yes              |         | No  |     |    |         |                    |     |     |                 |
| Form Fields       | No  | Yes |              | Yes              |         | No  |     |    |         |                    |     |     |                 |
| Screen Selections | No  | Yes |              | Yes              |         | No  |     |    |         |                    |     |     |                 |
| FA Icons          | No  | Yes |              | Yes              |         | No  |     |    |         |                    |     |     |                 |
| File Buttons      | No  | Yes |              | Yes              |         | No  |     |    |         |                    |     |     |                 |
| Menu Buttons      | No  | Yes |              | Yes              |         | No  |     |    |         |                    |     |     |                 |
| Search Buttons    | No  | Yes |              | Yes              |         | No  |     |    |         |                    |     |     |                 |
| Detail Labels     | No  | Yes |              | No               |         | No  |     |    |         |                    |     |     |                 |