# Web Page Responsive

Web pages created using **Page Designer** in ONEWEB are **web‑responsive by default**, unless the designer explicitly assigns a fixed width to specific elements. This built‑in responsiveness allows pages to adapt automatically to different screen sizes and device types without requiring additional configuration.

Page Designer also provides multiple tools that help designers **preview, adjust, and fine‑tune responsiveness** across desktop and mobile screens.

***

#### **Responsive Preview in Page Designer**

Page Designer includes a **device preview feature** that allows designers to see how a page will appear on different screen sizes.

To preview a page:

1. Open the page in **Page Designer**.
2. Click the desired **device preview icon** at the top of the designer screen.
3. Switch between desktop and mobile views to inspect layout behavior.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FCqmuck1hz8V1ijrMTC9E%2Fspaces_MpDjHWFRUtZ5nJcSfVXd_uploads_GcRNBFB9LUeiUkrqlhVH_0.png?alt=media&#x26;token=344ec03e-59c3-4e32-9431-d4ac89009dfb" alt=""><figcaption></figcaption></figure>

***

#### **Page Display on Desktop Screen Mode (1024px)**

When viewed in **desktop mode**, pages are rendered using wider layouts that take advantage of the available screen width. Elements such as columns and containers are displayed side‑by‑side to improve readability and information density.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F0EuOBuBwtW3PuPkDxX9m%2F1?alt=media" alt=""><figcaption></figcaption></figure>

***

#### **Page Display on Mobile Screen Mode (375px)**

In **mobile mode**, Page Designer automatically adapts the layout to a narrower screen width. Elements are stacked vertically, text is resized for readability, and spacing is optimized for touch interaction.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fi5YLWdVNiDZJsDYLy3tm%2F2?alt=media" alt=""><figcaption></figcaption></figure>

***

#### **Responsive Column Configuration**

For **column elements**, Page Designer provides built‑in support to **adjust column width per screen size**. Designers can increase or decrease column widths independently for desktop, tablet, or mobile views.

This allows fine‑grained control over layout behavior without breaking responsiveness.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FYSFWtIhG1wThu3hzeNTj%2F3?alt=media" alt=""><figcaption></figcaption></figure>

***

#### **Custom Responsive Styling with CSS Classes**

Page Designer provides a **Class** property for all elements, allowing designers to assign **custom CSS classes**.

Using this feature:

* Developers can apply responsive CSS rules
* Advanced layout behavior can be controlled using media queries
* Elements can follow custom responsive design standards

This approach enables greater flexibility while maintaining compatibility with ONEWEB’s responsive framework.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FpTVU3grqzsLciBAFRSGV%2F4?alt=media" alt=""><figcaption></figcaption></figure>

***

#### **Summary**

The **Web Page Responsive** feature in ONEWEB ensures that:

* Pages adapt automatically to different screen sizes
* Designers can preview responsive behavior in real time
* Column layouts can be customized per device
* Custom CSS can be applied for advanced responsiveness
* Pages provide a consistent experience across desktop and mobile devices

By combining automatic layout adaptation with flexible configuration options, Page Designer enables teams to build **responsive, modern web applications** with minimal effort.


---

# 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/building-apps/ui-page-designer/mobile-ux-ui/web-responsive/web-page-responsive.md?ask=<question>
```

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.