# Anchored GUIs

When you first attempt to anchor GUI elements to an area to the screen you may do it simply by setting each GUI node to have an X and Y anchor and a pivot. But if you scale the screen you may notice some issues with spacing.

![Unscaled Window](/files/-LJLIzU0pkojETuJJEpd)

![Scaled Window](/files/-LJLJ21ghgghP7XfNkIj)

As can be seen in the "Scaled Window" image above, the spacing between the nodes is inconsistent with the amount of scaling.&#x20;

The fix for this is easy!

For each area of the screen you wish to anchor nodes to, you must create a parent anchor GUI node.&#x20;

Create a box node. Set its size mode to manual, and set its size to 0,0,0. This will make it invisible.

![](/files/-LJLJfNUpfqXgj6CnD2R)

Then set the anchor box node to have the anchor type you want. In this case X anchor left, Y anchor top.

![](/files/-LJLKdUxvFZ-42Gu3vro)

Now you can move the box node to the area of the screen you wish to anchor other GUIs to.

![](/files/-LJLK5RzrW9RrRUtKUg3)

Then parent the other elements to this anchor GUI. You'll need to update their positions as they will now be relative to the anchor GUI.

![](/files/-LJLLpRcfDVEyYDFLWoJ)

Now when you scale the window the GUI elements will look to be spaced more consistently.

![](/files/-LJLKpYPOBA9mhdQkQeO)

You should generally follow this example when anchoring elements to areas of the screen as even in less extreme scaling situations the spacing can look off without this.&#x20;

Using anchor GUIs can be useful for general GUI organization as well.


---

# 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://read.bookofdefold.com/defold-a-z/defold-tips/anchored-guis.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.
