display: none doesn't work

Question

I have web app for making music from javascript. But I have problem with display: none of my .musicBox class.

Here are the index.html code with all important styles & scripts.

My index.html file on CodePen

  @media screen and (max-width: 520px) {
      .rotateDevice {
          display: block; 
      }
      .toneBox {
          display: none;
      }
  }

When I resize the window to under 520px width it will 'display: none' my color Boxes. But why it didn't?

Answer 1

Try out this may be it would help you:

Visibility: none;

Answer 2

There is something missing above this media query.

Remove the .a above it.

Answer 3

try

.toneBox {
    visibility: hidden;
}