Velo Tutorial: Displaying Elements in Mobile Only

You can use Velo to control elements so they display only in the mobile version of your site.

The basic steps to set up an element to display only in mobile are:

1. Set the element to be hidden when the page loads.
2. Use code to check if your site is being viewed on a mobile device or a desktop device.
3. If your site is being viewed on a mobile device, use code to display the hidden element.

Tutorial

To set up an element to display only in mobile:

1. Enable coding:

   • Wix Studio: If necessary, click and then Start Coding.
   • Wix Editor: Enable Velo Dev Mode for your site.

2. Add the element that you want to display only in mobile.

3. With the element selected, select the Hidden checkbox in the Properties & Events panel. This sets up the element so that when your page loads this element isn't displayed. Make a note of the ID for your element since we'll need to use that a little later.

   

4. Now we need to check whether your site is being viewed on a mobile device. Open the code editor. You'll see that following is already written.

   Copy

5. Add a line above the first line and enter the following code. This lets your site work with the wix-window-frontend module, which lets you determine the type of device your site is being viewed on.

   Copy

6. Replace lines 2-6 with the following code. This checks the type of device your site is being viewed on. It then sets the element that you set to be Hidden to be displayed for mobile only. 

   Copy

7. To make this code work with your element, replace button8 with the ID for your element that you noted in step 3.

8. When you are done, your code should look like this:

   Copy

9. If you have more than one element that you want to display only in mobile: 

   1. Complete step 3 for each element.
   2. Add a line after line 5 in the example above.
   3. Copy line 5 and paste it into the new line.
   4. Replace the ID of the first element with the ID of the second element.

Now your code should look like this:

API List

The following API is used in the code in this article. To learn more, see the API Reference.

• wix-window-frontend