Hiding Presets/Elements on Mobile

Hi. I’ve been working with presets and following responsive tutorial video and not having success. When using the presets to adjust mobile text size for mobile only - it seems to change the behavior on mobile and desktop. Is there just a way to hide certain elements/presets on mobile so that they can designed specifically for that viewpoint without sharing that element/preset on the desktop version?

2 Likes

Hi @Clique !

Super easy.

In the style panel to the left, whenever you double click on an element, simply uncheck the “Visibility” Checkbox, in whatever viewport you want to control.

Styles will cascade down to smaller viewports automatically, but you can override them with additional changes.

I.e. on desktop view, if you uncheck it at start, it will hide on all pages. If you then move to tablet and check it, it will remain hidden on desktop, and appear on tablet + mobile. If you then uncheck it on the mobile viewport, it will remain hidden on desktop, visible on tablet, and hidden on mobile.

Further customization can be achieved with custom CSS media queries.

Finally, the color of the parameters in the style panel will change to blue or yellow to reflect responsive queries, and help you see when an override style has been applied.

Hopefully that helps!

Ninja Edit:

So in your case, just add an element, or select an existing one, uncheck it on desktop, uncheck it on tablet, and check it on mobile.

4 Likes

@zachary Thank you so much! This is so helpful and SIMPLE! I’ve already executed it successfully :grinning:

3 Likes