# How to apply responsiveness to the node-red dashboard?

**URL:** <https://discourse.nodered.org/t/how-to-apply-responsiveness-to-the-node-red-dashboard/90696>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, dashboard-2\
**Created:** [4 September 2024 06:43 UTC](https://discourse.nodered.org/t/how-to-apply-responsiveness-to-the-node-red-dashboard/90696 "2024-09-04T06:43:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![shamim237](https://avatars.discourse-cdn.com/v4/letter/s/a87d85/32.png) [@shamim237](https://discourse.nodered.org/u/shamim237)\
**Post date:** [4 September 2024 06:43 UTC](https://discourse.nodered.org/t/how-to-apply-responsiveness-to-the-node-red-dashboard/90696/1 "2024-09-04T06:43:51Z")

</div>

I'm working on a Node-RED dashboard and struggling to make the layout responsive across different screen sizes and devices. I want the dashboard to adapt seamlessly whether it's viewed on a smartphone, tablet, or desktop.

I've tried adjusting the grid settings and group widths, but the layout still doesn’t scale as I’d like. Does anyone have suggestions or best practices for ensuring that a Node-RED dashboard is fully responsive?

Thanks in advance for any help!

[see the image](https://i.sstatic.net/cWcQcKxg.png). It is not showing any responsiveness at all.

 ![Screenshot 2024-09-04 121430](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/4/5418d666065ebe74132af9a24d22b33f27a9bef8.png)

tried this also:

```auto
<style>
  #Home_soil_sensor {
    position: relative;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  @media (min-width: 768px) {
    #Home_soil_sensor {
      width: 75%;
      margin: 0 auto;
    }
  }

  @media (min-width: 992px) {
    #Home_soil_sensor {
      width: 50%;
      margin: 0 auto;
    }
  }

  @media (min-width: 1200px) {
    #Home_soil_sensor {
      width: 40%;
      margin: 0 auto;
    }
  }
</style>

<div id="Home_soil_sensor" class="visible">
  <!-- Your content here -->
</div>

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [10 September 2024 09:40 UTC](https://discourse.nodered.org/t/how-to-apply-responsiveness-to-the-node-red-dashboard/90696/2 "2024-09-10T09:40:16Z")

</div>

Hi @shamim237 - welcome to the Node-RED Forums and thanks for your question.

I'm going to assume you're using the [latest Dashboard](https://dashboard.flowfuse.com/), rather than the [deprecated Dashboard](https://discourse.nodered.org/t/announcement-node-red-dashboard-v1-deprecation-notice/89006), although the colour of the navigation header suggests you may be using the latter,.

**Dashboard 2.0 Solution:**

Dashboard 2.0 has multiple options for [Layouts](https://dashboard.flowfuse.com/layouts/), including "Grid", which is responsive by default, so the `ui-template` you're building in will automatically scale to the width of the screen.

---

<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:** [10 September 2024 12:46 UTC](https://discourse.nodered.org/t/how-to-apply-responsiveness-to-the-node-red-dashboard/90696/3 "2024-09-10T12:46:50Z")

</div>

Quick hint on @media breakpoints. It is much better to use `em` measures rather than `px` in breakpoints since it means that users who zoom in or out will still get sensible switchovers.

Here is my note-to-self for remembering reasonably standard breaks:

```plaintext
 * Recommended @media breakpoints:
 * Tablet: 48em @ 16pt = 768px
 * Tablet Wide: 62em @ 16pt = 992px
 *
 * Mobile Small: 30em @ 16pt = 480px
 * Mobile Medium: 37.5em @ 16pt = 600px
 * Mobile Large: 48em @ 16pt = 768px

```

`16pt` is the default font point size for most browsers.

---

<div class="post-metadata">

**Author:** ![shamim237](https://avatars.discourse-cdn.com/v4/letter/s/a87d85/32.png) [@shamim237](https://discourse.nodered.org/u/shamim237)\
**Post date:** [10 September 2024 12:49 UTC](https://discourse.nodered.org/t/how-to-apply-responsiveness-to-the-node-red-dashboard/90696/4 "2024-09-10T12:49:42Z")

</div>

thanks, I just realized we were using older version of the dashboard. 😑

---

<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:** [24 September 2024 12:50 UTC](https://discourse.nodered.org/t/how-to-apply-responsiveness-to-the-node-red-dashboard/90696/5 "2024-09-24T12:50:28Z")

</div>

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