Responsive layout

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 ?

<style>

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

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

</style>

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.

1 Like

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.

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