Reference anchors control the point used to position 2D markup. Choosing an anchor that matches how an element should sit in your layout helps it behave consistently when the available screen space changes.
In the accompanying video, we use a centred heading and a group of icons to demonstrate the difference. This guide explains why those elements can drift, how to change their anchors, and what to review before sharing your presentation.
Why markup can move when the screen changes
Cadasio presentations can be viewed on phones, tablets, laptops and widescreen monitors. Each gives your content a different amount of space, so a layout that works on your own monitor needs to be checked at other sizes too.
By default, the top-left corner of a 2D markup element's container is used as its positioning reference. That reference point matters because it determines how the element is placed when the viewing area changes.
Consider a heading near the top of a step. You can drag it into the middle of the screen and make it look centred at the current size. However, its position may still be referenced from the top-left corner of its container. Once the screen becomes narrower, the heading can appear to move away from the centre.
The same issue can affect icons placed near an edge. Their positions look right in the view you used to arrange them, but their anchors do not reflect the way you want them to relate to the screen.
If an element shifts unexpectedly during a resize, its reference anchor is a useful first check.
Understand alignment and reference anchors
Alignment tools help you arrange an element in the current view. Reference anchors determine which point of its container is used for positioning. Both affect the result, but they serve different purposes.
For example, using an alignment tool to centre a heading can make the current layout look correct. If that heading still uses its top-left reference point, the alignment alone may not produce the behaviour you want at another screen size.
Choose the reference anchor to match the intended placement, then check the position. For centred text, use a centre reference anchor. For icons that belong along the right-hand side, choose an appropriate reference anchor on their right side.
Think about the relationship you want to preserve. Should the heading remain in the middle? Should a control stay near the right-hand edge? Answering that question makes the anchor choice easier.
Keep text centred with a centre reference anchor
The video starts with text that should remain centred. Although it can be dragged or aligned into position, it loses that appearance when the screen is resized because its position is still referenced from the top left.
Changing the reference anchor to the centre gives the text the intended behaviour. The positioning reference now matches the part of the container you want to keep centred.
To apply this to your own project:
Select the text element you want to centre.
Change its reference anchor to the centre.
Check its position and use the alignment tools or reposition it if needed.
Resize the viewing area and confirm that the text stays centred.
The resize check is an essential part of the process. A heading that looks correct at one width has only been checked at that width. Make the viewing area narrower and wider to see whether the placement continues to behave as intended.
Also look at the space around the heading. Centring solves a positioning problem, but the text still needs enough room beside other elements. If a long heading becomes crowded on a smaller screen, review its size and layout as a separate adjustment.
Anchor groups of icons to the correct side
Icons often form a repeated part of a presentation's layout. You might have a small group arranged down the right-hand side of a step, for example. As with centred text, their reference anchors should reflect where they belong.
If these icons still use their top-left reference point, they can drift when the screen changes. Updating their anchors to reference their right side helps them maintain the intended relationship with that side of the view.
You can make this change to several elements together using box-selection. Select the relevant icons as a group, then update their reference anchors in one operation.
This is useful when a set of icons shares the same positioning requirement. It reduces repetitive editing and helps you apply the same anchoring choice across the group.
After changing the anchors, check the arrangement at different screen sizes. Look at the distance from the screen edge, the spacing between the icons, and any nearby text or model details. Each icon needs to remain clearly visible, and the group should still feel deliberately arranged.
Check anchors before adjusting device layouts
Reference anchors are a sensible starting point when an element moves away from its intended position. Correcting the anchor can resolve the underlying positioning issue before you begin making changes for individual device layouts.
However, anchoring does not create additional space. A heading can remain centred and still be too large for a phone. A group of icons can stay on the correct side while sitting too close to other content. These are layout issues to address during your device review.
Cadasio's Devices tools let you review the presentation at different screen sizes and make adjustments where needed. Use them to check the complete step, including how the model, text and icons fit together.
A useful order is to check the reference anchors first, confirm the base layout, then review the smaller device layouts. This helps you distinguish an element that needs a better positioning reference from one that needs a different size or arrangement.
Our Devices guide and video explain the device workflow in more detail.
Review custom overlays in the Overlay Builder
If your project uses a custom overlay, review that layout as well. The step content may look correct while an overlay element needs a different position or more space on a smaller display.
The Overlay Builder uses the same device system as the Designer. Activate each device mode and adjust the overlay as needed for the available space.
As you review it, check the relationship between the overlay and the content underneath. Text should remain readable, icons should be clearly separated, and the overlay should leave enough room for viewers to understand the step.
Because overlays are reusable, you only need to configure each overlay once. You can then benefit from that layout wherever the overlay is used, while checking that it works comfortably alongside the content in your project.
For a closer look at the builder and its positioning options, see our Overlays guide.
Review the result across screen sizes
Once you have updated the anchors, work through the presentation and check the result at different sizes. Give particular attention to steps with long headings, several icons or a custom overlay, where space may be more limited.
Before sharing, check that:
Text intended to stay centred keeps its position as the view changes.
Icons remain on the intended side with suitable spacing from the edge.
Groups of elements stay clearly separated at smaller sizes.
Text remains readable and fits comfortably beside other content.
Custom overlays work alongside the step content in each device mode.
Where possible, open the presentation on the devices your audience will use. Follow the steps in sequence so you can assess how the layout feels during normal viewing, as well as how each step looks individually.
Start with any text or icons that appear to drift when you resize the view. Check their reference anchors, make the appropriate change, and resize again. Once the positioning behaves as intended, use the device previews to identify any remaining layout adjustments.
