# Prettify

{% hint style="warning" %}
**Beta version:** This feature is currently in its beta stage.
{% endhint %}

## What is Prettify

**Prettify** feature allows you to instantly enhance the aesthetics of your layout with a single click. 

Unlike [AI Responsive](/foxify-app/foxstudio/editor-tools/ai-responsive.md), which optimizes for different devices, Prettify **only applies to the current viewport** and **affects only the first-level nested elements** of the selected section.

## How to use Prettify

<figure><img src="/files/0NyamMQe13KB8rSK3ILF" alt=""><figcaption></figcaption></figure>

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

1. **Select a section** you want to enhance.
2. Click the **Prettify** button in the toolbar.&#x20;
3. After the system adjusts the section’s layout, review and click **Apply changes** if you're happy with the results.&#x20;
   {% endhint %}

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

## Best practices

:white\_check\_mark: Prettify **only affects the first-level nested elements** inside the selected section. It won’t modify deeply nested elements.

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

:white\_check\_mark: Prettify does not affect responsiveness across different devices; it only **improves the current viewport layout**.

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

{% hint style="info" %}
If you want to **enhance the responsiveness on all viewports**, see [AI responsive](/foxify-app/foxstudio/editor-tools/ai-responsive.md)
{% 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_prettify&#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/prettify.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.