# Add New Screen
**Add New Screen** is a feature in **ONEWEB Page Designer** that supports **multi‑device screen design** within a single web page.\
While web applications normally adapt across screen sizes automatically, this feature allows designers to **explicitly define and design for specific device screens**, such as mobile views, inside the Page Designer.
This is especially useful when:
* Designing **mobile‑specific layouts** for web applications
* Previewing UI behavior on different devices
* Customizing layouts for specific screen dimensions
***
### Default Multi‑Screen Support
By default, Page Designer already supports responsive multi‑screen layouts.
However, **Add New Screen** provides more control by allowing explicit device definitions.
***
### Add a New Device Screen While Creating a Page
#### Step 1: Open Create Page
1. Click **Create Page**
2. In the sidebar, you will see the **Screen switcher**
***
#### Step 2: Add New Screen
1. Click **Switch**
2. Click **Add New Screen**
***
#### Step 3: Configure Device Screen Settings
A modal configuration dialog will appear.
1. Enter:
* **Device Name**
* **Width**
* **Height**
2. Click **Save**
***
### Manage Multiple Screens
After adding a screen:
* The new device screen appears in the **Add New Screen menu**
* Users can add **more than one screen** if required
* Each screen represents a specific device layout
Once screen setup is complete, click **Start Design**.
***
### Design with Multiple Screens
When the design area opens:
* Available screens are shown on the **top toolbar**
* Users can switch between screens instantly
* Layout and component changes apply per screen
This allows designers to fine‑tune UI behavior for specific devices without creating separate pages.
***
### Design Perspective
As part of **responsive design best practices**:
* Use **Add New Screen** when default responsiveness is insufficient
* Define screens for critical device sizes (e.g. mobile, tablet)
* Keep layouts consistent across screens where possible
* Combine with **Display Flex** and **Box Model Editor** for best results
The Add New Screen feature enables precise, device‑aware design while maintaining a single page structure.
---
# 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.onewebstack.com/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-components/pages/page-features/add-new-screen.md?ask=
```
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.
