Tutorial | Display Elements in Mobile Only

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.

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 API. It lets you determine the type of device your site is being viewed on.

   Copy

   Learn more about using npm packages when developing sites.

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

   Copy

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:

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.

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

1. Publish your site.
2. View the published site.
3. Open your browser's developer tools.
4. 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 .
5. Refresh the page so your site now loads as if it were on a mobile device.

See also

• About Mobile Sites with Code