Curate the Responsive and Default Views by Hiding Specific Containers in Free-Form Layout
You can hide visualization containers to provide a more responsive experience on mobile devices, as well as display only certain objects in non-responsive default views.
For example, there is a details grid and a background image in a non-responsive view. However, in a responsive mobile view, users don’t need to see these containers. You can easily hide the elements, so mobile users have a clean, intuitive view with no unnecessary background images or visualizations that create excessive scrolling.
The mobile breakpoint is 768 pixels. See Best practices for creating a responsive free-form dossier for more information.
- Open a dossier in free-form layout.
- Identify the containers you want to hide in a responsive mobile view.
In the Layers panel, right-click the container and choose Hide on Mobile.
Notice the icons to indicate which containers are hidden in a responsive view.
Use the Responsive Preview to see how the mobile view looks.
To re-display the hidden containers in a responsive view, right-click the container in the Layers panel and choose Show on Mobile.
Original non-responsive view:
You want to hide the image and grid from the mobile responsive view to eliminate any necessary scrolling.
There may be instances where you want to display only specific objects in a non-responsive view. This is where Hide on Canvas comes in handy. Hide on Canvas has two great use cases.
Curate the responsive view so only specific objects display on mobile and are then hidden in a non-responsive view. This could include creating different navigation bars for mobile and desktop. Here are two examples:
Great to use while authoring to help adjust and format overlapping containers. Remember to re-show on the canvas before you save unless you want the objects to remain hidden in a non-responsive view.