> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🖥 Ajuster le ratio de mon app

Celestory vous permet de créer des applications adaptables à toutes les formes d'écran.

Pour ajuster le ratio de votre app, dans votre projet, cliquez sur **Jouer le module courant**. 

Les fenêtres de **Tester en jouant** et **Débogue** apparaissent. Cliquez sur l'onglet Affichage de la fenêtre Débogue.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/onglet-affichage-fenetre-debog_lq2vme.jpg)

Il existe 2 notions:

| * **Visualiser les ratios de l'écran**: Vous permet de simuler la vue de votre app par un autre ratio d'écran. Cela ne change pas le ratio de votre app.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/liste-ratios-decran_nokd07.jpg)

| * **Ratio du projet**: Cela change le ratio de votre projet.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/liste-ratios-projet_f0rn4l.jpg)
---

|| * **Portrait (pour mobile prioritaire)**: Définit pour l'app la **hauteur supérieure à sa largeur**, tout en s'adaptant à l'écran jusqu'à créer un carré.

Si l'app est en ratio **portrait** sur un écran **9/16** ou 9/19,5, elle s'affichera en plein écran.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/app-en-portrait-sur-ecran-9-19_15vhgq9.jpg)

Si l'app est en ratio **portrait** sur un écran **16/9**, elle se limitera à un carré.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/app-portrait-sur-ecran-desktop_13r5sna.jpg)

|| * **Paysage (pour desktop prioritaire)**: Définit pour l'app la **largeur supérieure à sa hauteur**, tout en s'adaptant à l'écran jusqu'à créer un carré.

Si l'app est en ratio **paysage** sur un écran **16/9**, elle s'affichera en plein écran.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/app-en-paysage-sur-ecran-deskt_txrcdu.jpg)

Si l'app est en ratio **paysage** sur un écran **9/16**, elle se limitera à un carré.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/app-paysage-sur-ecran-9-16_1pq9b6i.jpg)

|| * **Responsive (aucune priorité)**: l'app s'adapte à tout format d'écran sans limite, mais attention à designer votre expérience pour que le contenu soit agréable sur tous les formats.
---

Pour le template Chatbot, à l'intérieur de l'app, il existe 3 notions intéressantes pour aller plus loin:

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/cadre-fond-et-flux_1lv9mhg.jpg)

||| * **Cadre:** Le Cadre vous permet de personnaliser la zone extensible en arrière-plan de votre application. Par exemple, un cadre ajuste avec une app bloquée portrait.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/cadre-100-noir_7zb06z.jpg)

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/cadre-50-rouge_be467f.jpg)

||| * **Fond**: Défini le fond du flux l'application à afficher par défaut. Il peut être changé à tout moment grâce à un bloc Fond.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/fond-orange_14qyabc.jpg)

||| * **Flux**: Représente le “mur” de discussion par rapport à l’espace que prend l’application. Ici vous pouvez contraindre ou positionner le Feed à votre guise, comme la taille qu'il prend dans le fond.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/flux-100_4zx3fy.jpg)

****