# Space between groups

**URL:** <https://discourse.nodered.org/t/space-between-groups/46630>\
**Category:** Dashboard\
**Created:** [3 June 2021 07:02 UTC](https://discourse.nodered.org/t/space-between-groups/46630 "2021-06-03T07:02:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nubinstanley](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@nubinstanley](https://discourse.nodered.org/u/nubinstanley)\
**Post date:** [3 June 2021 07:02 UTC](https://discourse.nodered.org/t/space-between-groups/46630/1 "2021-06-03T07:02:43Z")

</div>

Hi All

In my dashboard, one of the tabs has 3 groups. When I open it in by desktop browser, they are arranged horizontally and when I open them in my phone browser, they are arranged vertically.

1. Is there any way to arrange the groups vertically in my desktop browser as well ? (This is not very important as I intend to use the dashboard from my phone primarily)
2. In my phone browser, how can I increase the space between the vertically arranged groups ?

---

<div class="post-metadata">

**Author:** ![nubinstanley](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@nubinstanley](https://discourse.nodered.org/u/nubinstanley)\
**Post date:** [4 June 2021 03:25 UTC](https://discourse.nodered.org/t/space-between-groups/46630/2 "2021-06-04T03:25:44Z")

</div>

Bump....

Any suggestions? 😃

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [4 June 2021 06:45 UTC](https://discourse.nodered.org/t/space-between-groups/46630/3 "2021-06-04T06:45:14Z")

</div>

I'm afraid nothing I can think of. That's how the responsive Dashboard layout works. 🙈  
The size and order of groups have influence on their arrangement, you can play around with that, but that's about it.

I ended up creating specialized tabs for different screens and use-cases. One that is rather fixed for Full-HD on my central display, and others that take advantage of the responsive layout for phones and tablets.

If you want to have full control over the frontend, you can take alternative routes (uibuilder, for example), but that involves deeper knowledge of HTML/CSS/JS.

---

<div class="post-metadata">

**Author:** ![sfedo](https://avatars.discourse-cdn.com/v4/letter/s/3da27b/32.png) [@sfedo](https://discourse.nodered.org/u/sfedo)\
**Post date:** [4 June 2021 06:52 UTC](https://discourse.nodered.org/t/space-between-groups/46630/4 "2021-06-04T06:52:14Z")

</div>

a possible way to go, is to place everthing in 1 group and use custom css to display the whole stuff like its in different groups:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a56eefb1884261851d46c766d68fdbb980ffde1.png)

here you can add space to add more space. Thats the only way I know to do it with standard dashboard.

---

<div class="post-metadata">

**Author:** ![nubinstanley](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@nubinstanley](https://discourse.nodered.org/u/nubinstanley)\
**Post date:** [6 June 2021 08:06 UTC](https://discourse.nodered.org/t/space-between-groups/46630/5 "2021-06-06T08:06:14Z")

</div>

Hey

Sorry for the delay in response ( was not well 🙂 ).

@kuema Thank you for the inputs. 👍

@sfedo I don't know anything about css. 😃 Maybe, I could learn the bare minimum to get something working. Anyhow, I also have use-cases where I need to hide/show certain groups. I guess this would not be an option if I take this css route ?

---

<div class="post-metadata">

**Author:** ![sfedo](https://avatars.discourse-cdn.com/v4/letter/s/3da27b/32.png) [@sfedo](https://discourse.nodered.org/u/sfedo)\
**Post date:** [6 June 2021 15:40 UTC](https://discourse.nodered.org/t/space-between-groups/46630/6 "2021-06-06T15:40:36Z")

</div>

When you need to hide, show something and you dont know how to do it with javascript, then its not the way to go.  
In this case you have to deal with standard dashboard. When you primery use your phne, then the groups are under each other. You can also add more space between them, when you go on your dashboard menu, and hit the tab "site". Here you can add more vertical space between groups.

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

---

<div class="post-metadata">

**Author:** ![nubinstanley](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@nubinstanley](https://discourse.nodered.org/u/nubinstanley)\
**Post date:** [6 June 2021 15:56 UTC](https://discourse.nodered.org/t/space-between-groups/46630/7 "2021-06-06T15:56:07Z")

</div>

> [@sfedo](#):
>
> You can also add more space between them, when you go on your dashboard menu, and hit the tab "site". Here you can add more vertical space between groups.

This was what I was looking for. 😃 Thank you! 🙂

---

<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:** [20 June 2021 15:57 UTC](https://discourse.nodered.org/t/space-between-groups/46630/8 "2021-06-20T15:57:00Z")

</div>

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