---
tags: gui
title: Layouts
brief: This example demonstrates the use of layouts.
author: agulev
scripts: layouts.gui_script
---

Overview : A small UI panel that changes its position depending on the screen size (canvas size in HTML5) using the Defold layouts system. [:More on Layouts with Defold:](https://defold.com/manuals/gui-layouts/#layouts)

Layouts are added in the GUI where we want to support them:
![outline](outline.png)

The panel is configured in both layouts, Portrait and Landscape:
![portrait layout](layouts-p.png)
![landscape layout](layouts-l.png)