How to hide element by id using @media?

Question

I am using @media queries in CSS, how set up display:none for specific @media size and override all bootstrap media setup?

My html:

<div id="top" class="navbar navbar-fixed-top" role="navigation">
        <div class="container"> 
         Menu
        </div>
    </div>

My css:

@media only screen and (max-width: 768px){
#top{
    dislay:none;
    }
}

Where I am wrong?

Answer 1

Typo mistake in your css replace display:none

@media only screen and (max-width: 768px){
  #top{
    display:none;
  }
}