# Dashboard rotation & widget resizing on small screens

**URL:** <https://discourse.nodered.org/t/dashboard-rotation-widget-resizing-on-small-screens/101986>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [24 October 2026 10:36 UTC](https://discourse.nodered.org/t/dashboard-rotation-widget-resizing-on-small-screens/101986 "2026-10-24T10:36:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 October 2026 10:36 UTC](https://discourse.nodered.org/t/dashboard-rotation-widget-resizing-on-small-screens/101986/1 "2026-10-24T10:36:33Z")

</div>

My android phone has a screen resolution of 1080 x 2400, which is actually higher than my PC monitor so perhaps "small screens" is a misnomer.

A dashboard viewed on my phone in portrait mode looks like this

 ![Screenshot_20261024_111515_Firefox Focus](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/750fc7f27f92c8926cec599c6913ebeb0cc2d950.jpeg)

Rotate the phone to landscape:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d831cc31acba4e85fc918e1bdf6a4a78ea5f7742.png)

And back again to portrait

 ![Screenshot_20261024_105942_Firefox Focus](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c2f037ab996d69505928b476c57ad5f7901bba54.jpeg)

It looks like when the page loads in portrait mode, the browser fits 3 grid units wide.  
After rotating and rotating back, it fits 6, making groups too small to be usable.  
The text however is not resized to fit and so titles wrap and values disappear from view.

I have only noticed this today after installing NR 5.0.9, but it might be a well-known and old feature?  
NR dashboard is 1.34.0 (same behaviour with 1.32.0)  
The same behaviour is seen with Firefox or Chrome on Android.  
Both groups are 2x1 grid units.  
The page theme is "Compact (32px)"

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 October 2026 11:15 UTC](https://discourse.nodered.org/t/dashboard-rotation-widget-resizing-on-small-screens/101986/2 "2026-10-24T11:15:53Z")

</div>

I haven't seen this problem, though interestingly I do occasionally see a similar thing using Grafana.

If you refresh the page after rotating back does it recover?

You can set the number of columns for different screen widths in the page configuration. Note though that you might not have the number of pixels that you think you have as there seem to be physical and logical pixels on mobile devices, which are often different. Fiddling with those settings should not make a difference to the problem you are seeing though, but it might be worth playing with the numbers to get more info on the problem. I have these settings for the page:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/189555b42f06c450b7fa28db486740a7658a299c.png)

[Edit] Just realised I am not using NR 5.0.9 on this system. Will update after lunch to see if it is a factor.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 October 2026 11:35 UTC](https://discourse.nodered.org/t/dashboard-rotation-widget-resizing-on-small-screens/101986/3 "2026-10-24T11:35:23Z")

</div>

> [@Colin](#):
>
> If you refresh the page after rotating back does it recover?

Yes.

> [@Colin](#):
>
> You can set the number of columns for different screen widths in the page configuration.  
> ...  
> I have these settings for the page

I have the same settings as you, I've never changed these.  
It does look like on initial load in portrait it uses the default (3 columns) and rotating back to portrait it switches to tablet settings (6 columns).  
But launch the page in landscape and it uses 6 columns.  
There must indeed be a virtual vs physical resolution issue here.

According to [1440px.com](http://1440px.com), the "CSS viewport" is 360 x 780.

If I change the first breakpoint to 768 px and the second to 800, initial load in portrait is 3 columns, rotating to landscape stays at 3 columns (making the landscape page less usable) and rotating back stays at 3 columns (yay!).  
Why 768 has this effect when the viewport is 780 remains a mystery.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 October 2026 13:48 UTC](https://discourse.nodered.org/t/dashboard-rotation-widget-resizing-on-small-screens/101986/4 "2026-10-24T13:48:48Z")

</div>

I am not convinced that those settings are working correctly at all, I can't get it to behave as I would expect when I change the numbers.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 October 2026 14:07 UTC](https://discourse.nodered.org/t/dashboard-rotation-widget-resizing-on-small-screens/101986/5 "2026-10-24T14:07:10Z")

</div>

> [@jbudd](#):
>
> According to [1440px.com](http://1440px.com), the "CSS viewport" is 360 x 780

What does that change to if you rotate and rotate back again?  
Mine shows 360x718 and 720x322!

However, as I said, if I change the page settings I cannot seem to get what I expect. More investigation needed, I am reasonably sure that it used to work ok.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 October 2026 16:21 UTC](https://discourse.nodered.org/t/dashboard-rotation-widget-resizing-on-small-screens/101986/6 "2026-10-24T16:21:36Z")

</div>

Visiting [1440px.com](http://1440px.com) from my phone, I get Portrait:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/8685cf0c3e072c80738a3400a265a07c14997696.png)  
Landscape:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/febdf9295406590b956a2e3118508ce1eef8f8e8.jpeg)

---

<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:** [25 October 2026 12:43 UTC](https://discourse.nodered.org/t/dashboard-rotation-widget-resizing-on-small-screens/101986/7 "2026-10-25T12:43:21Z")

</div>

Another reason, if one were needed, why modern web UI's should virtually never be using px sizing. A few pixels on a modern screen may be all but invisible and they bear no real comparison with anything usefull.