Version 2021
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.
Hide Containers in a Responsive View
- 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:
Responsive preview:
You want to hide the image and grid from the mobile responsive view to eliminate any necessary scrolling.
Hide Containers in a Non-Responsive View
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.