Adjust which content displays on mobile versus desktop in your Modern Editor design. For example, hide a long navigation bar on mobile; or, hide a mobile-enhanced image on desktop. Any block in your design can be hidden on mobile or desktop.
Topics covered in this article:
Easily hide content on mobile or desktop in your Modern Editor design. Just click on the block and adjust the visibility options by checking the box for hide on mobile or hide on desktop.
Use the slider bar to watch your design update to the mobile view to see how the content hides on mobile.
In text block areas you can select a section of text and apply a mobile-hide class to hide the content on mobile. You can also click on an image in a text area and add a class of mobile-hide.
1. Open your design in Modern Editor.
2. Select any text block from the preview panel.
3. Highlight the text or double click on the image you would like to high on mobile and apply the 'mobile-hide' class.
You can select 'mobile-hide' from the class dropdown or type 'mobile-hide' into this field.
Once a block is hidden in Modern Editor a yellow notification will appear at the bottom of the screen to indicate hidden elements.
Some older versions of Modern Editor designs will not have this option. Update your Modern Editor code.