> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorial | Display Elements in Mobile Only

## Article: Tutorial | Display Elements in Mobile Only

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/user-interface/tutorial-display-elements-in-mobile-only.md

## Article Content:

# Tutorial | Display Elements in Mobile Only

> The code in this article was written using the following module versions:
>
> - @wix/site-window (v1.38.0)
>
> Learn how to install npm packages [in the editor](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-in-the-editor.md) or [using the CLI](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-with-the-cli.md).

You can use code to control elements so they act or display differently in the mobile version of your site.

## Step 1 | Add the elements on your site

Add elements to your site that you'd like to customize for the mobile version.

## Step 2 | Open the page code file

Open the code file for your page where you added the elements. The way you open the file depends on the IDE you're using.

::::tabs
:::Editor
1. Navigate to **Page Code** in the Code sidebar.
1. Select your page.

A page code file opens. The file includes a sample `onReady()` function.
:::
:::Wix-IDE-or-Local-IDE
Open the file in the `Pages` folder. The file includes a sample `onReady()` function.
:::
::::

## Step 3 | Check the device type

Check whether your site is being viewed on a mobile device.

1. In the first line of your code, import the [@wix/site-window](https://dev.wix.com/docs/sdk/frontend-modules/window/introduction.md) API. It lets you determine the type of device your site is being viewed on.

   ```js
   import { window } from "@wix/site-window";
   ```

   Learn more about using [npm packages](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/about-npm-packages.md) when developing sites.

1. Wrap the code for the element in an `if` statement to handle the various devices on which the element exists.

   ```js
   $w.onReady(async function () {
     if (
       (await window.formFactor()) === "Mobile" ||
       (await window.formFactor()) === "Tablet"
     ) {
     } else {
     }
   });
   ```

## Step 4 | Customize actions on elements

In the conditional statement write any actions you’d like to do with your elements in the mobile version.

For example, here is code for hiding a button when viewed on a desktop screen, but showing the button on mobile and tablet screens:

```js
import { window } from "@wix/site-window";

$w.onReady(async function () {
  if (
    (await window.formFactor()) === "Mobile" ||
    (await window.formFactor()) === "Tablet"
  ) {
    $w("#button1").show();
  } else {
    $w("#button1").hide();
  }
});
```

## Step 5 | Test

If you want to test how your code works on mobile devices, publish your site and view the published version on a mobile device or in a mobile device emulator.

<blockquote class="important">

**Important:**
If you preview your site, it will always behave as if it's being viewed on a desktop device, even if you preview from the mobile editor.

</blockquote>

To test your site on a desktop machine as if it's being viewed on a mobile device:

1. Publish your site.
1. View the published site.
1. Open your browser's [developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools).
1. Use your browser's developer tools to emulate a mobile device. For example, for Google Chrome, this is called **Toggle device toolbar** and turned on using this icon ![toggle device toolbar](https://wixmp-833713b177cebf373f611808.wixmp.com/images/70adbe3c880a3585698dcb51ddc466e3.png).
1. Refresh the page so your site now loads as if it were on a mobile device.

## See also

- [About Mobile Sites with Code](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/build-a-custom-frontend/mobile/about-mobile-sites-with-code.md)