The display size of a project is not fixed after creation. You can change it in the editor through the project configuration, and the rest of the design follows automatically.
Dynamic display size adjustment
The display size is part of the project configuration. Open the settings dialog from the toolbar and edit the Project settings:
| Setting | Description |
|---|---|
| Screen width | Horizontal resolution of the target display. |
| Screen height | Vertical resolution of the target display. |
As you edit, the Screen Preview shows the resulting resolution and aspect ratio. After you choose Save, all screens and widgets in the project update to the new display size, so you can validate the design against the new dimensions immediately, without recreating or re-importing the project.
Responsive layout integration
Changing the display size works best together with the flex layout. When a container uses a layout, its children are positioned by layout rules instead of at fixed coordinates, so the interface adapts to the new dimensions on its own.
Combined with responsive layout, the design:
- Automatically adapts to changes in device dimensions.
- Does not need to be redesigned when the device dimensions change. The layout adjusts to the new display size while keeping the interface usable and visually consistent.
Related guides
- Settings - configure the project's screen width and height.
- Layout - arrange children with flex layout so the UI adapts to size changes.
- Override screen size - the display size versus the editor-only design size.
- Preview - validate the design at the configured display size.
- Dynamic LVGL version - version-dependent capabilities, including live display resizing.
- Workspace - the display size configured when a project is created.