# Constraints

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

<figure><img src="/files/C5dwD2Xm54q028p1n3Ti" alt=""><figcaption></figcaption></figure>

Constraints allow you to control how elements behave in relation to their parent container. When you set constraints for an element, it ensures the element maintains a consistent position relative to the container, even when the screen size changes.&#x20;

## Automatic constraints&#x20;

When you add an element to a section, container, or grid cell, and drag it around, it is automatically docked:

* To the top of the parent element (container, stack, etc.).
* And to the left or right edge of the parent element - whichever is the closest.

In the example below, the text element is automatically docked to the top and right sides of the container.

You can observe this when dragging the element and via the Inspector panel. The Constraints are indicated by the dashed blue lines surrounding it.

<figure><img src="/files/4cAmfGdOzzsTL4yuyejc" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps to enable automatic constraints:**

1. Click on the element you want to set the auto constraints to open its **Inspector** panel.
2. Under the **General** tab, click **Auto constraints elements**.
   {% endhint %}

<figure><img src="/files/kbJcIJaYsgph0IOyfDmS" alt=""><figcaption></figcaption></figure>

## Manual constraints

You can override the auto constraints elements feature, and set the position manually from the Inspector.&#x20;

{% hint style="success" %}
**Steps:**

1. Select the relevant element.&#x20;
2. In the **Inspector** panel > **General** tab, locate the **Constraints** section.
3. Select the 2 constraint points (top or bottom, left or right).&#x20;

Click the <img src="/files/oMel9c4XfCZ7DCwlzMvG" alt="" data-size="line"> **Center** if you want to make the element always in the center.

4. Enter the value for constraints. **This can be considered as the margin between the selected element and the edge of its parent**. &#x20;
   {% endhint %}

<figure><img src="/files/QwoYEfmZ19H7cFXJcz1r" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Measurement units for constraints**:

* Horizontal constraints (left or right): Percentage (%).
* Vertical constraints (top or bottom): Pixels (px).
  {% endhint %}

For example, if a text element's constraints are set as 10% for the Left and 100px for the Top, the element will stay to the left-right even as the screen size changes:

* On a container width of 1265px, the margin between the element and the container's left edge is 126.5px, and the margin-top of the element with the container is 100px.
* On a container width is resized to 900px, the margin between the element and the container's left edge is 10% of 900 = 90px, and the margin-top of the element with the container is 100px.

{% hint style="warning" %}
You can apply constraints to any layer/element.&#x20;

* You can apply constraints to [frames you have nested within other frames](/foxify-app/foxstudio/layout-and-styling/frame-elements.md).
* You can't apply constraints to [elements included in a stack](/foxify-app/foxstudio/layout-and-styling/stack-elements.md) with the stack border.
  {% endhint %}

## Use alignment tools

To quickly align elements, you can use the option for the section's position alignment. This will override the current constraints.

<figure><img src="/files/HDjg50Y60jzulmftAJFT" alt=""><figcaption></figcaption></figure>


---

# 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://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints.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.