Cadasio includes several tools to help you control how a project behaves as the available screen space changes. Reference anchors keep 2D markup positioned as intended. Step Panels give supporting information its own space. Devices let you adjust individual steps for smaller displays, and the Overlay Builder lets you make similar changes to custom overlays.
In the accompanying video, we work through these tools in an existing project. This guide explains the thinking behind each adjustment and gives you a workflow you can apply to your own presentations.
Build your main layout first
Start by creating your steps and getting the presentation working well in the normal base mode. At this stage, focus on what each step needs to communicate. Choose a useful camera view, position the relevant labels, and make sure the viewer can follow the sequence.
It is usually best to configure device settings towards the end of the project. If you are still making substantial changes to the main layout, you may end up revisiting the same steps in several device modes. Getting the base presentation into good shape first makes the later review easier to manage.
You can still make decisions about anchors and supporting content as you build. A heading that should stay centred needs the right reference anchor from the outset. A large table that competes with the model may be better placed in a panel before you begin reviewing smaller screens.
Once the main layout is ready, resize the viewing area and look for what changes. Try to identify the cause of each problem. A drifting heading needs a different adjustment from an oversized heading, and neither is necessarily a camera problem.
Keep 2D markup aligned with reference anchors
One of the easiest layout issues to miss is an element that appears correctly aligned at your current screen size but moves when the viewing area changes.
Imagine a heading positioned across the top of a step. You drag it into the centre, or use the alignment tools, and it looks right. When you make the screen narrower, however, the heading no longer appears centred.
The reason is the point used to position the markup.
Why a centred heading can drift
By default, 2D markup is positioned as a percentage of the screen size, measured from the top-left corner of the screen to the top-left corner of the markup container. You can see the position values on the selected element's Position tab.
That means an element can look centred even though its position is being calculated from its left edge. When the screen width changes, the same percentage position is applied, but the visual result can be different.
Alignment puts the heading in the right place for the current view. The reference anchor determines which point of its container is used for positioning as the view changes.
For a heading that should remain horizontally centred near the top of the screen, use a Top Centre reference anchor and a horizontal position of 50%. The middle of the heading's container is then positioned at the middle of the screen. Its vertical position can be set separately.
To check this in your project:
Select the text element and open the Position tab.
Change the reference anchor to Top Centre.
Set or confirm the horizontal position at 50%.
Resize the viewing area and check the result.
Check the anchor before repeatedly dragging an element back into place. If the reference point does not match the intended layout, the same issue can return at another screen size.
Anchor icons to the side they belong to
The same principle applies to icons arranged along the right-hand side of a step. If they still use their top-left reference point, they can appear to drift as the screen changes.
Choose a reference anchor on their right side so their positioning reflects the side of the screen they belong to. When several icons need the same change, use box-selection to select them together and update their reference anchors in one operation.
Afterwards, resize the view again. Look at the group as a whole, including the spacing between the icons and their relationship to nearby text. Correct anchoring helps preserve positioning, but a narrow screen may still need additional layout changes.
Use Step Panels for supporting information
Some content needs more space than a label or icon. Tables and videos are useful additions to an interactive presentation, but displaying them permanently over the scene can make a smaller screen feel crowded.
In the video example, a large table looks comfortable on the main monitor. On a smaller display, even a laptop, it takes up too much of the view. Reducing the table until it fits would also make its contents harder to read.
A Step Panel gives that information a separate place alongside the step. Viewers can resize the panel or hide it when they want to concentrate on the model.
To move a table into a panel, open the current step's settings, add a Step Panel, and place the table inside it. Remove the original table from the main scene once the panel contains the information you need.
The practical benefit is that viewers can decide how to use the available space. They can open the table to check a value, then hide the panel to return to the 3D view. On a phone, that flexibility can be more useful than keeping every piece of content visible throughout the step.
Step Popups are another option for additional information. When choosing how to present supporting content, think about when the viewer needs it and how much space it requires. A short label may belong beside the model; a detailed table or video may work better outside the main scene.
For more examples of content you can present this way, see our guide to using Step Panels.
Adjust individual steps with Devices
Anchors and panels address many common issues, but some steps need a different arrangement when the screen becomes smaller. A model might need more room around it, or several balloons might become too closely packed.
Devices let you save additional step properties that override the base settings at the relevant screen width. This gives you control over the smaller-screen layout while preserving the main presentation.
For example, a camera view that works on a wide monitor may crop the model on a narrower display. In Tablet mode, you can zoom out slightly and update the step. When you return to the base mode, the original camera view remains in place.
The adjustment is stored for the device layout, so you can tailor the view to the space available.
Review each step in the active device mode
Start on the first step and activate Tablet mode. Look at the layout before changing anything. If the model, labels and other content already work well, move on to the next step.
When a step needs attention, make the adjustment while the device mode is active, then update the device properties before continuing. Previewing a change and saving it are separate actions, so include the update in your routine.
Work through the whole presentation in this way. A first step with a simple title may look fine, while a later step with several annotations needs more space. Reviewing the sequence helps you find those differences.
Adjust more than the camera
Device settings are useful for more than changing the camera view. Most step properties can be adjusted, which means you can improve the arrangement of individual elements as well.
In the video, one step has balloons that would look better with more even spacing. Rearranging them in Tablet mode and updating the device properties improves that layout without changing their positions in the base mode.
For each adjustment, keep the purpose of the step in mind. Zooming out may bring the entire assembly into view, but the detail being explained still needs to be visible. Moving a balloon may prevent a clash, but its relationship to the relevant part should remain clear.
Work from tablet to phone
Once you have reviewed every step in Tablet mode, move on to Phone mode.
By default, device properties roll down to smaller screen sizes. This means the changes you make for a tablet can also provide a starting point for the phone layout. A camera adjustment or a better-spaced set of balloons may already solve part of the problem.
Roll-down can be disabled in the project settings, so check the setting if a project behaves differently from what you expect.
Even with roll-down enabled, review every step on the phone layout. The available space is more limited, and a layout that works well on a tablet can still feel crowded on a phone. Text may dominate the view, or labels that were comfortably separated may now sit too close together.
Working from larger to smaller device layouts lets you build on the changes already made. You can then spend time on the remaining issues, rather than repeating every adjustment from the beginning.
Keep text readable with Device Scale
Text needs particular attention on smaller screens. A heading that feels balanced on a desktop can occupy too much of a phone display. At the same time, making text too small can leave the viewer struggling to read it.
The Device Scale property provides a quick way to adjust text markup for the active device. In the video example, the opening text is too large in Phone mode. Reducing the scale gives it more comfortable proportions within the available space.
Make the change while looking at the complete step. The text should fit alongside the model and other elements, with enough room to understand what is being shown. Stop when the layout feels clear, then check that the words are still easy to read.
Apply a consistent scale across later steps
If the same scale is appropriate for later steps, use Update and Propagate to carry the change forward. This saves you from repeating the adjustment step by step and helps maintain consistent text sizing through the presentation.
Propagation and device roll-down do different jobs. Propagation carries a change into later steps; roll-down carries device properties to smaller screen sizes. Keeping that distinction in mind helps you understand why a change appears elsewhere in the project.
After propagating a scale change, review the remaining steps. Longer text, denser annotations or a different camera view may still need individual attention. A consistent starting scale makes the review quicker, but it does not guarantee that every arrangement will fit.
Review custom overlays in the Overlay Builder
If your project uses a custom overlay, include it in the device review. An overlay may contain navigation controls, text or branding that occupies space across many steps. Those elements need to work comfortably alongside the presentation at smaller sizes.
The Overlay Builder uses the same device system as the Designer. Activate each device mode and adjust the overlay for the available space.
Pay attention to the placement and spacing of controls. Check that text remains readable and that the overlay leaves enough room for the content it sits over. A layout that looks tidy by itself may still compete with labels or other elements in a particular step, so review it within the project as well.
Because overlays are reusable, you only need to configure each overlay once. This makes it worthwhile to give the shared layout a careful review: the improvement can benefit every step where that overlay appears.
Our Overlays guide covers the builder and its positioning tools in more detail.
Check the whole presentation before sharing
After making your changes, run through the presentation from the viewer's point of view. Check the sequence at different screen sizes and, where possible, on the devices your audience will use.
Give particular attention to the steps with the most content. These are often where a smaller display reveals problems that are easy to miss on your main monitor.
Before sharing, check that:
Headings and icons stay in their intended positions as the viewing area changes.
The camera keeps the relevant parts and details visible.
Text is readable without taking over the scene.
Balloons and labels have enough space and remain easy to associate with the model.
Supporting information is accessible, and Step Panels can be resized or hidden as expected.
Overlay controls fit comfortably alongside the step content.
Your adjustments have been updated and saved in the intended device mode.
Resize the viewing area between your usual preview sizes too. Viewers may open the presentation in a smaller browser window, and checking a few intermediate widths can reveal spacing issues that a single preview misses. If the project supports different orientations, review those as part of the same pass.
For a closer look at device properties, watch the dedicated video
