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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atd-dts.gitbook.io/atd-knack-operations/knack-code/mobile-optimization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.