# AI responsive

<Hint type="info">

AI Responsive is currently in **beta** stage.

</Hint>

## 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">

![image](https://docs-assets.foxecom.app/foxify-app/image_ZMpvoigD.png)

</Tab>

<Tab title="Tablet">

![image](https://docs-assets.foxecom.app/foxify-app/image_SpGY34u1.png)

</Tab>

<Tab title="Mobile">

![image](https://docs-assets.foxecom.app/foxify-app/image_gigLa3B3.png)

</Tab>
</Tabs>

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 type="info">

Not&#x65;**:** AI Responsive speeds up layout adjustments but doesn't replace manual fine-tuning. Always review the result before applying.

</Hint>

### How is this different from Prettify?

<Cards columns="2">
<Card title="Use this">

<strong>AI responsive</strong>

</Card>
<Card title="Use instead if..." subtitle="Prettify" href="https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/prettify" />
</Cards>

## How to use

![image](https://docs-assets.foxecom.app/foxify-app/Untitled%20design%20(19)_DvxjuHMk.gif)

<Stepper>

<Step>

#### Select a section

Click on the section you want to optimize on the canvas.

</Step>

<Step>

#### Run AI Responsive&#xD;

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

</Step>

<Step>

#### Review the changes&#xD;

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

</Step>

<Step>

#### Apply or adjust&#xD;

If the result looks good, click **Apply changes**. If not, make manual tweaks before applying.

</Step>

</Stepper>

## Related resources

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/prettify">Prettify</PageLink>

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints">Constraints</PageLink>

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/stack-elements">Stack elements</PageLink>

***