# Mobile Mode

## var - mobile-mode?

If a webpage's width exceeds the mobile breakpoint, it sets a variable 'mobile mode?' to "no". Otherwise, the variable changes to "yes". 

This variable informs different elements on the page how to adjust according to the screen size. 

<figure><img src="https://2579826874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV1MErI30ZCe37SndGqT1%2Fuploads%2FmwJ2GGMGAH0FOHZMlrlY%2Fimage.png?alt=media&#x26;token=2ca392da-b2d4-4094-85dd-d261d911b614" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
ICYMI:\
**var - mobile mode** references the [app-settings](https://docs.foundationtemplate.com/design-and-structure/page-variables/app-settings "mention") variable instead of performing an additional Search For operation.
{% endhint %}

## Basic use case:

**var - mobile mode?** is then used to dictate when the header should switch between the mobile and desktop versions in addition to numerous other elements on the page.

<figure><img src="https://2579826874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV1MErI30ZCe37SndGqT1%2Fuploads%2F7iJFb3WXd3Mf35gx8EHX%2Fimage.png?alt=media&#x26;token=c6b0eb1f-e4d9-4b96-99b4-27b6a244b4a6" alt="" width="375"><figcaption></figcaption></figure>

## A more complex example:

The dashboard template's Side Nav Floating Group's visibility is based on a number of factors: the page's settings, the page width, the current parameters.

<figure><img src="https://2579826874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV1MErI30ZCe37SndGqT1%2Fuploads%2Ffku5zo2V9mPMa2ujyvVF%2Fimage.png?alt=media&#x26;token=6ad240f2-9f4c-4c72-b6a2-4df429653a15" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
**Why not just use "*****current page width < 900px*****" instead?**

It may be easier in the moment, but it can create headaches down the road.

The conditionals above are just some of dozens like it across just this page.

Need to change each one from 900px to 980px app wide? *No thanks.*

\
This complexity may not be necessary for all apps, but building a strong foundation requires it.
{% endhint %}