# Different layout if connect with tablet or phone

**URL:** <https://discourse.nodered.org/t/different-layout-if-connect-with-tablet-or-phone/84751>\
**Category:** Dashboard\
**Created:** [20 January 2024 09:39 UTC](https://discourse.nodered.org/t/different-layout-if-connect-with-tablet-or-phone/84751 "2024-01-20T09:39:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucianv](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lucianv](https://discourse.nodered.org/u/lucianv)\
**Post date:** [20 January 2024 09:39 UTC](https://discourse.nodered.org/t/different-layout-if-connect-with-tablet-or-phone/84751/1 "2024-01-20T09:39:46Z")

</div>

Hi,  
I have designed a flow and a dashboard which is ok when open it on PC. I would like to detect when I open with a tablet or phone and show other design (show less things and arrange them differently ) to fit on the small screen.  
I searched before post here but couldn t find anything  
Thank you very much.

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [20 January 2024 09:54 UTC](https://discourse.nodered.org/t/different-layout-if-connect-with-tablet-or-phone/84751/2 "2024-01-20T09:54:29Z")

</div>

Hi,  
Try with `RED.utils.getBrowserInfo()` to detect the env.

---

<div class="post-metadata">

**Author:** ![lucianv](https://avatars.discourse-cdn.com/v4/letter/l/cab0a1/32.png) [@lucianv](https://discourse.nodered.org/u/lucianv)\
**Post date:** [20 January 2024 10:06 UTC](https://discourse.nodered.org/t/different-layout-if-connect-with-tablet-or-phone/84751/3 "2024-01-20T10:06:17Z")

</div>

But how can I have 2 dashboards and direct client to one of it after I get browser info? Is there any examples/tutorials ?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [20 January 2024 16:01 UTC](https://discourse.nodered.org/t/different-layout-if-connect-with-tablet-or-phone/84751/4 "2024-01-20T16:01:06Z")

</div>

You can't. You can only have 1 dashboard.

All you can do is adjust the layout using CSS media queries or faffing about with browser detection and custom ui\_templates.

If you want more comprehensive capabilities, you would need to use UIBUILDER.

* * *

UPDATE 2024-02-01: Now that Dashboard 2.0 is live, that is also an option as it has more flexibility than Dashboard 1.0.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [2 February 2024 04:18 UTC](https://discourse.nodered.org/t/different-layout-if-connect-with-tablet-or-phone/84751/5 "2024-02-02T04:18:42Z")

</div>

The _problem_ is you set up the dashboard for that screen.

It is.... 1024 x 768. (Old school numbers but....)

Your phone connects and the page loads, but the resolution of the phone is not the same as the monitor.

It will get changed.

Best you can do is hope the ratios are the same then you can ZOOM in/out and things should be better.

But no promises.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [2 April 2024 04:19 UTC](https://discourse.nodered.org/t/different-layout-if-connect-with-tablet-or-phone/84751/6 "2024-04-02T04:19:39Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.