title: Bootstrap background image not filling up space when mobile
body: <p>I'm trying to make a background image fill up (in height) when going mobile. When I make the browser smaller, it doesn't seem like my media queries are kicking in. </p>
  
  <p>Here's what my css looks like:</p>
  
  <pre><code>#main {
      background-image:url(../images/cc.jpg); 
      height:650px; background-size:cover; 
      background-position:0 -210px; 
      background-repeat:no-repeat;
  }
  
  #main .row {
      margin-top:200px;
  }
  
  
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    #footer {
      font-size:10px;
    }
  
      #main {
          background-image:url(../images/cc.jpg); 
          height:100%; 
          background-size:cover; 
          background-repeat:no-repeat;
      }
  
      #id{ margin-top:90px; }
  
      #main .row {
          margin-top:100px;
      }
  
  }
  
  @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { 
    #footer {
      font-size:10px;
    }
  
      #main {
          background-image:url(../images/cc.jpg); 
          height:100%; 
          background-size:cover; 
          background-repeat:no-repeat;
      }
  
      #id{ margin-top:90px; }
  
      #main .row {
          margin-top:100px;
      }
  
  
  
  }
  </code></pre>
  
  <p>Here's the URL if you want to see what the page looks like: </p>
  
  <p><a href="http://www.gulflifehomes.com/" rel="nofollow noreferrer">http://www.gulflifehomes.com/</a></p>