# AI responsive

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

## What is responsiveness?

{% 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 %}

Responsiveness in web design refers to a website’s ability to adapt and display correctly across different screen sizes and devices (desktops, tablets, and mobile phones). &#x20;

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

## How AI responsive works

Foxify’s **AI Responsive** feature automates section optimization, ensuring your design looks great and functions well on **all screen sizes**.

When you enable **AI Responsive**, the system analyzes your section’s structure and adjusts the positioning of all nested elements dynamically. This includes:

* Prevent content overlap ✅
* Ensure all elements within the viewport ✅
* Dynamically adjust spacing and alignment ✅

## How to use AI responsive in Foxify

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

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

1. **Select a section** that needs optimizations.
2. Select the option **AI responsive** in the toolbar.
3. Review the AI-generated adjustments to ensure they meet your design expectations.
4. If you're happy with the result, click **Apply changes**.&#x20;
   {% endhint %}

{% hint style="warning" %}
This feature doesn't replace manual changes but works like a smart helper to speed up layout adjustments.
{% endhint %}

<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: 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.