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://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBajBHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--53f720c945af302221e8c61592e9927bdb56b613/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://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBanNHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--764ca04d47cb393925883e112049e1145229278b/liste-ratios-decran_nokd07.jpg)

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

![](https://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBandHIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--19d0dd9e0e6f907a3ab99c52cafee746c8062932/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://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBcnNGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--a3425f2e3aad108b4daaffb9d1e48b355e85b694/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://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBcjBGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1cc0a327cad9663745b5ddc932a8c3b4d3be1f54/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://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBcm9GIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f96c838aae31288a6cd05d27b71b4f8bfe139e54/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://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBcndGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--2a9ef460a98ebc1c493b2053edb44e6e4d960a85/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://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0lGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7a6a84e6cb077611172963e583f48c6739866aab/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://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0FGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--68035200c90c1dedad9e0ec963689cad7f19783f/cadre-100-noir_7zb06z.jpg)

![](https://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0VGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--300968665d37c2563bd82720286bbad91a8eb51d/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://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHdGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--77151ac97ed3fba68b24f2c37e253234e12d1d63/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://chatwoot.fr.nocodespacelab.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHNGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--8fff34ac4eeeef41fdb475e9f1c2cbde8ba2db54/flux-100_4zx3fy.jpg)

****