How to hide an element on mobile or desktop

To hide an element on phones in TeleportHQ, click the Mobile breakpoint icon above the canvas, select the element, and in the right panel open Visibility and click the eye toggle (tooltip hidden). Hiding applies to the breakpoint you are on and every smaller one. Larger screens still show the element.

Before you start#

• Hiding in TeleportHQ follows the same rule as other responsive styles: changes flow from larger screens to smaller ones. See How to make your site look good on phones and tablets.
• A hidden element is still part of your page. It isn't deleted.

Hide an element on mobile#

For example, to hide a large decorative photo on phones:

1. In the top bar above the canvas, click the Mobile icon (tooltip 479px). To hide it on all phones and tablets, click Tablet (991px) instead.

2. On the canvas, select the photo.
3. In the right panel, on the Visual tab, find the Visibility section near the bottom, after Transforms. Click its title or its + to open it.
4. Click the eye toggle (tooltip hidden). The photo disappears from the canvas at this size.

You can also right-click the element on the canvas and choose Hide.

Show an element on mobile only#

For example, a "Call us" button that should appear only on phones:

1. In the top bar, click the default breakpoint icon (1200px in a new project).
2. Select the button.
3. In Visibility, click the eye toggle. The button is now hidden on every screen size.
4. In the top bar, click the Mobile icon (479px).
5. In the left sidebar, click Pages, Components & Tree View. In the layers tree in the lower half, click the button. Hidden elements can't be clicked on the canvas.
6. In Visibility, click the eye toggle again. The button shows on Mobile only.

When you show an element again on a smaller screen size, TeleportHQ gives it back the layout it had before you hid it. If that layout came from a CSS class, TeleportHQ can't restore it and sets a flexible layout at that size instead, so a grid can turn into a row. If that happens, set the layout again in the element's Inner Layout section while the same screen size is selected. See How to create a grid layout.

Check that it worked#

Click each breakpoint icon in the top bar. The element appears only where you want it. Open Preview and switch between Desktop view and Mobile view next to Viewport to see it as a visitor would. Hiding uses real styles, so it also applies to your published site.

Find and edit a hidden element#

A hidden element can't be selected on the TeleportHQ canvas. To get to it:

• In the left sidebar, open Pages, Components & Tree View and select it in the layers tree, where it shows a closed-eye icon. See How to use the layers tree to find and select elements.
• Or, at the bottom center of the canvas, click the card that says, for example, "3 hidden elements", then click the element in the Hidden Elements list.

When a hidden element is selected, a bar under Visibility reads Hidden on canvas with a Show button. Show reveals it in the editor only, so you can edit it. It stays hidden on your site.

Troubleshooting#

I hid an element on mobile and it disappeared on tablet too You were on a larger breakpoint when you hid it, for example Tablet. Switch to that breakpoint, select the element in the layers tree, and click the eye toggle to show it again. Then switch to Mobile and hide it there.

The Hide option is greyed out Some interactive elements, such as the mobile menu, burger menu and dropdown list, can't be hidden this way. The tooltip reads "Editing or removing some properties of interactive nodes is not allowed."

The − button in Visibility is greyed out A larger breakpoint already has a visibility value for this element. Use the eye toggle instead.

Good to know#

• To fade an element instead of hiding it, set Opacity in the same section (0 to 100).
• The Visibility section isn't available for the page itself.
• To hide an element on every screen size, or only when a condition is true, see How to hide an element.