> For the complete documentation index, see [llms.txt](https://docs.foxecom.com/foxify-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/ai-responsive.md).

# AI responsive

{% hint style="info" %}
AI Responsive is currently in **beta** stage.
{% endhint %}

## What is responsiveness?

Responsiveness is a website's ability to adapt its layout correctly across different screen sizes. Without it, elements can overlap, text becomes unreadable, and sections break on mobile or tablet.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/ZMpvoigDFwUUAlWyPm6W" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Tablet" %}

<figure><img src="/files/SpGY34u112iIVu841QU0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/gigLa3B3eZENk0VjCI1A" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Without responsiveness, websites may appear cluttered, with broken layouts, unreadable text, and misaligned sections when viewed on different devices.

## What AI responsive does

When you run AI Responsive on a section, it analyzes the structure and adjusts all nested elements automatically. It handles three common layout problems:

* **Prevents overlap**: Detects and separates elements that stack on top of each other on smaller screens.
* **Keeps content in view**: Ensures all elements stay within the visible viewport — nothing gets cut off.
* **Adjust spacing**: Dynamically rebalances spacing and alignment across breakpoints.

{% hint style="info" %}
Not&#x65;**:** AI Responsive speeds up layout adjustments but doesn't replace manual fine-tuning. Always review the result before applying.
{% endhint %}

### How is this different from Prettify?

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Use this</td><td><strong>AI responsive</strong></td><td>Fixes layout issues across all screen sizes — desktop, tablet, and mobile. Use when elements overlap, go off-screen, or break on smaller devices.</td><td></td></tr><tr><td>Use instead if...</td><td><strong>Prettify</strong></td><td>Your layout already works across devices but looks visually unpolished on the current viewport. Prettify improves spacing and visual balance — current viewport only.</td><td><a href="/pages/XVENJvVTRCEWqD5FoWD9">/pages/XVENJvVTRCEWqD5FoWD9</a></td></tr></tbody></table>

## How to use

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

{% stepper %}
{% step %}

#### Select a section

Click on the section you want to optimize on the canvas.
{% endstep %}

{% step %}

#### Run AI Responsive&#xD;

Click **AI responsive** in the toolbar. The AI will analyze the section and generate layout adjustments.
{% endstep %}

{% step %}

#### Review the changes&#xD;

Check the AI-generated adjustments across device previews — desktop, tablet, and mobile.
{% endstep %}

{% step %}

#### Apply or adjust&#xD;

If the result looks good, click **Apply changes**. If not, make manual tweaks before applying.
{% endstep %}
{% endstepper %}

## Related resources

{% content-ref url="/pages/XVENJvVTRCEWqD5FoWD9" %}
[Prettify](/foxify-app/foxstudio/editor-tools/prettify.md)
{% endcontent-ref %}

{% content-ref url="/pages/SSvw9bNbiI3U8pCyvlpe" %}
[Constraints](/foxify-app/foxstudio/layout-and-styling/constraints.md)
{% endcontent-ref %}

{% content-ref url="/pages/p6gcZTnSpmCOVsMAFM4J" %}
[Stack elements](/foxify-app/foxstudio/layout-and-styling/stack-elements.md)
{% endcontent-ref %}

***

<div data-full-width="false"><figure><img src="/files/kcilvHtHzK8t5VOGf1nR" alt=""><figcaption><p>Foxify AI turns a prompt into a well-structured page layout in seconds. <a href="https://admin.shopify.com/apps/foxify-builder?utm_source=foxecom&#x26;utm_medium=help_center_foxify_ai-responsive&#x26;utm_campaign=anchor-text&#x26;utm_term=try-foxify-ai"><mark style="color:orange;">Try Foxify AI</mark></a> ✨</p></figcaption></figure></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/editor-tools/ai-responsive.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.