# Tips

## How to make a r**esponsive** UI

Adaptive UI is implemented by creating multiple versions of the interface (e.g., desktop, mobile) and using interactions to determine which one should be displayed based on screen size.<br>

{% stepper %}
{% step %}

#### Desktop and mobile UIs

Create two separate UI versions: one for desktop and one for mobile.
{% endstep %}

{% step %}

#### Interactions

Set up interactions that detect screen size and control the visibility of the appropriate UI:\
\
\- **trigger**: `On update`\
\- **condition**: `Breakpoint`\
\- **action 1**: Show the relevant UI\
\- **action 2**: Hide the other UI<br>
{% endstep %}
{% endstepper %}

{% embed url="<https://youtu.be/psm6GT3sWBg?si=FIHH1ZishXP0py2v>" %}

## How to link Floating UI with a Hotspot or any other object

Floating UI can be positioned not only relative to the canvas, but also relative to any object - such as hotspots, 3D objects, or even the pointer. This behavior is controlled in the **Visibility** action settings. When selecting a Floating UI, use the **Relative to** option to define the reference point.

To adjust the corner and offset from that point, use the **Offset** and **Position** settings within the Floating UI configuration (Design mode).

<figure><img src="/files/nYY30xRcKg6MUk6UcPvS" alt="" width="563"><figcaption></figcaption></figure>

{% embed url="<https://youtu.be/7EjESmzHzok>" %}

## How to switch Floating UI using Variants

Floating UI can be used within Variants by placing it into a group.

<div align="left"><figure><img src="/files/enpfyGvaNlabbQVlZFyO" alt="" width="363"><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.vectary.com/documentation/3d-configurator/floating-ui/tips.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.