How do I hide my header elements on smaller screens/devices only?

Question

I'm working on a fairly complex Mobile-First Bootstrap Website (which also needs to look decent on desktops. I have a fairly large header which looks good on desktop, but takes up too much screen space on smaller screens/mobile. I tried to do it with "@media" but its not working. Anyways I've included the relevant code.

HTML

<div class="container">

    <div class="row" id="top">
      <div class="col-md-8">
        <img src="fair_sized_logo.png" class="img-responsive" alt="we">  
        <h1 style="color: white; font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia;" >Complications Due To?</h1>
        <h3>header header header</h3>
        <h3>ipsum ipsum</h3> 
      </div>
      <div class="col-md-4" id="BardStuff"> 
       <h3 style="color: black !important">header</h3>
       <h4 style="color: black; font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia;"> 
     ipsum impsum ipsum
      </h4>
    </div>
  </div> 
</div>  

CSS

div#top.row { 
background-color: rgba(1,4,117, 1);


}
div#top.row h3 { 
color: white;
font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia; 
}  




@media (max-width: 800px) { 
/* not working */

#top.row {  
display: none !important;

}

}

Answer 1

First of all, "Mobile First" really means what it says. The fact that you're coding for desktop and then "fixing" it for mobile suggests that you're not following the mobile first theory.

Secondly, Your media query has an extra character in it:

@media (min-width:; 800px) {

remove the semicolon

@media (min-width: 800px) {

Also, I think since it seems you are writing desktop first, I think it should read max-width instead of min-width.

You could either change that, or change your CSS to have your display none outside of your media query:

#top.row {  
    display: none !important;
}

@media (min-width: 800px) { 
    div#top.row { 
        background-color: rgba(1,4,117, 1);
        display:block;
    }
    div#top.row h3 { 
        color: white;
        font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia; 
    }  
}