# Responsive layout

**URL:** <https://discourse.nodered.org/t/responsive-layout/50356>\
**Category:** Dashboard\
**Created:** [29 August 2021 17:37 UTC](https://discourse.nodered.org/t/responsive-layout/50356 "2021-08-29T17:37:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [29 August 2021 17:37 UTC](https://discourse.nodered.org/t/responsive-layout/50356/1 "2021-08-29T17:37:08Z")

</div>

Hi all,

I have a clock and logo etc on the top bar, but when viewing on mobile devices these get in the way.

After some searching I found this code to hide objects based on screen width. As I want to hide 2 items, but at different widths I copied it with a second entry.

It works but it hides both elements at the same time rather than one or the other, can anyone help with correct syntax for multiple items ?

```auto
<style>

@media screen and (max-width: 800px) {
  #clock {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  #my-home-button {
    display: none;
  }
}

</style>

```

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [30 August 2021 03:12 UTC](https://discourse.nodered.org/t/responsive-layout/50356/2 "2021-08-30T03:12:44Z")

</div>

I found it better to have a clock and a logo as separate templates... Then each has it's own width limit set accordingly within it's template code.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [31 August 2021 13:35 UTC](https://discourse.nodered.org/t/responsive-layout/50356/3 "2021-08-31T13:35:43Z")

</div>

So actually this does work as expected, I just needed to change the width values, as my top bar is quite busy I need to drop some of the less important items when needed.

---

<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:** [14 September 2021 13:36 UTC](https://discourse.nodered.org/t/responsive-layout/50356/4 "2021-09-14T13:36:40Z")

</div>

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