Headlines - Footer background, can't get rid of white space on resize


#1

Hey guys, I have been working on this trying to get the bottom footer to get rid of the white space without any luck. Whenever you resize it the white bars pop up.. could someone please look at this and let me know what I am missing here?? Everything else looks good.


!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <h1>
              Headlines.
            </h1>
          </div>
          <div class="col-md-9">
            <ul class="nav nav-tabs pull-right">
              <li><a href="#">About</a></li>
              <li><a href="#">Our Services</a></li>
              <li><a href="#">Our Team</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h2>
          We <span>collect and curate</span> articles, opinions, and images from around the world.
        </h2>
      </div>
    </div>

    <div class="banner">
      <div class="container">
        <h1>
          The Bottom Line.
        </h1>
        <p>
          We deliver the news that is relevant to you.
        </p>
      </div>
    </div>

    <div class="cards">
      <div class="container">
        <h2>
          Our Expertise.
        </h2>
        <div class="row">
          
          <div class="col-md-4">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p1.jpg">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p2.jpg">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p3.jpg">
          </div>
          
          <div class="col-md-4">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p6.jpg">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p5.jpg">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p4.jpg">
          </div>
          
          <div class="col-md-4">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p7.jpg">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p8.jpg">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p9.jpg">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p10.jpg">
          </div>
          
        </div>
        
      </div>
    </div>

    <div class="footer">
      <span>
      <div class="container">
        <div class="row">
          <div class="align-left col-md-4">
            <h3>
              Headlines.
            </h3>
            <p>
              1000 7th Avenue
            </p>
            <p>
              New York, NY
            </p>
            <p>
              (484) 192 - 8372
            </p>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/email.svg" height="20px" width="20px">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/fb.svg" height="20px" width="20px">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/twitter.svg" height="20px" width="20px">
          </div>
        </div>
     
       </div>
      </span>
    </div>

  </body>
</html>


CSS

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Libre Baskerville', sans-serif;
}

.footer .container{
  background-color: black;
  color:white;
}

.container {
  max-width: 980px;
  margin: 0 auto;
}

.jumbotron {
  background-color: transparent;
 
}

.jumbotron h2{
  font-size: 40px;
  padding-right:400px; 
}

.jumbotron h2 span{
  color:#FFC200;
}
  .banner{
    background-color:#333333;
    color: white;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 150px;
  }
  
.cards{
  background-color:#FFC200;
  text-align: center;
}
.cards h2{
  padding-top: 80px;
  padding-bottom: 80px;
}

.cards img{
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (max-width: 992px) {
  .col-md-4 {
    margin: 0 auto 0;
    text-align: center;
    width: 100%;
  }
  .cards img {
    width: 60%;
  }
  
  .header h1{
    font-size: 18px;
  }
  
  .footer{
    background-color:black;
  }
  
  .container .footer{
    background-color: black;
    color: white;
  }
  
   .footer div {
    background-color:black;
  }
  
    
html	> body > .footer{
  
  background-color:black;
  }
}

@media (max-width: 500px) {
  .header h1, .footer{
    text-align: center;
     }

  .nav li {
    text-align: center;
    width: 100%;
  }

  .cards img {
    width: 100%;
  }
  
  .footer{
    background-color: black;
    
  }
 
  body > div.footer > div > div > div{
    
    background-color:black;
  }

  span { background-color: black;}
  


}


#2

You simply need to define the background colour for the .footer.

.footer {
    background-color: black;
}

Do not put this code inside the media query.


#4

Thanks... I guess the @media query applies to everything below it. They should clarify that in the curriculum.


#5

You're very welcome :slight_smile:

Media query applies when the condition of media query is true, example:

@media (max-width: 600px) {

}

code inside this query will be applied when width of window is less than 600px.

And yes, that was mentioned in the course, maybe you didn't read it or skim the whole way through for that :slight_smile:


#6

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