Banner background disappears on full screen layout


#1

https://www.codecademy.com/courses/web-ext/projects/html-css-prj_bestbite


The dark-grey banner section keeps disappearing when I go to full-screen layout and looks normal on the split screen. I can't for the life of me figure out why. Any ideas?


<!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=Arvo:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <!-- header -->
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <h1>BestBite</h1>
          </div>
          <div class="col-md-6">
            <ul class="nav nav-pills">
              <li class="active"><a href="#">About</a></li>
              <li><a href="#">Sign Up</a></li>
              <li><a href="#">Log In</a></li>
            </ul>
          </div>
        </div><!-- /.row -->
      </div><!-- /.container -->
    </div><!-- /.header -->
      
    <!-- Jumbotron -->
    <div class="jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
        	<h2>Browse.</h2>
        	<h2>Create.</h2>
        	<h2>Share.</h2>
          </div>
        </div><!-- /.row -->

      </div><!-- /.container -->
    </div><!-- /.jumbotron -->

    <!-- banner section -->
    <div class="section banner">
      <div class="container">
        <h3>Always have the answer to "What's for dinner?"</h3>
        <a href="#" class="btn btn-default btn-lg">Learn More</a>
      </div><!-- /.container -->
    </div><!-- /.section banner -->

    <!-- page-header -->
    <div class="section">
      <div class="container">
      	<div class="page-header">
      	  <h3>Newest Contributions</h3>
      	</div><!-- /.page-heder -->
          <div class="row">
            <div class="col-md-4 subheading">
              <h4>Breakfast</h4>
              <ul>
                <li>Maple French Toast</li>
                <li>Rolled Oats with Berries</li>
              </ul>
            </div>
              <div class="col-md-4 subheading">
              <h4>Dinner</h4>
              <ul>
                <li>Black Bean Stuffed Peppers</li>
                <li>Pesto Pasta with Spinach</li>
              </ul>
            </div>
            <div class="col-md-4 subheading">
              <h4>Dessert</h4>
              <ul>
                <li>German Chocolate Cake</li>
                <li>Hazelnut Tiramisu</li>
              </ul>
            </div><!-- /.subheading  -->
          </div><!-- /.row  -->
      </div><!-- /.container -->
   </div><!-- /.section  -->

    <div class="footer">
      <div class="container-fluid">
        <p>&copy 2014 BestBite</p>
        <p class="text-center">
        <a href="#">BestBite.com</a>
        </p>
        <p class="text-right">12 Greentree Lane, Orlando, FL</p>
      </div><!-- /.container -->
    </div><!-- /.footer -->
    
  </body>

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Arvo', serif;
  font-size: 16px;
}

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


/* Header */

.header h1 {
  position: relative;
  top: 10px;
}

.nav-pills {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 20px;
}

.nav-pills li a {
  color: #d8192f;
  border: 1px solid #d8192f;
  margin: 5px;
}

.nav-pills li.active a,
.nav-pills li.active a:hover,
.nav-pills li a:hover,
.section .btn:hover {
  background-color: rgba(216,25,47,1);
  box-shadow: 0 2px 4px rgba(0,0,0,.5); 
  color: #fff;
  text-decoration: none;
}

/* Jumbotron */
.jumbotron {
  height: 500px;
  background-image: url("https://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  top: 30px;
}

.jumbotron h2 {
  color: white;
  text-align: right;
  font-size: 64px;
  position: relative;
  top: 90px;
  right: 10px;
  line-height: 50px;
}

/* Banner */
.section .btn {
  background-color: rgba(216,25,47,.5);
	border: 0px;
	margin-top: 24px;
	color: #fff;
}

.banner, .supporting {
  text-align: center;
  padding-top: 40px;
}

.banner {
  height: 180px; 
  color: #fff;
}

ul {
  list-style-type: none;
}

.page-header h3,
.subheading {
  text-align: center;
}

.page-header h3 {
  font-size: 2rem;
  position: relative;
  top: 20px;
  padding-bottom: 30px;
}

.subheading h4 {
  color: #d8192f;
}

.subheading li{
  position: relative;
  right: 15px;
}

.footer .container-fluid {
  background-color: #eeeeee;
  font-size: 14px;
  height: 120px;
  padding-top: 30px;
  margin-top: 40px;
}

.footer p {
  float: left;
  width: 33%;
}

.footer a {
  color: #d8192f;
}

/* Media Queries */
@media (max-width: 680px) {
  .header h1 {
    margin-bottom: 20px;
    text-align: center;
  }
  .nav {
    float: none;
    margin: 0 auto;
  }
  .banner {
    background-color: #36343f;
    height: 220px;
  }

  .nav-pills li:first-child a  {
    margin-left: 0;
  }
}


#2

You could probably remove this selector rule, altogether. We only need a rule for :hover.


#3

That selector rule styles the "learn more" button. Without it, it defaults to the bootstrap button style.


#4

Add this rule instead:

.banner a {
  color: white;
  background-color: rgba(216, 25, 47, 0.5);
}

That will give your button the right color.


#5

Correct me if I'm wrong, but isn't ".banner a" just another way to specify the same button? I chose to use ".section btn" to remind me exactly what I was styling. I also had to add the margin and border attributes to move the button downwards and to remove the border.

I have no problem rendering the button. It's the banner background that I'm having issues with. It keeps disappearing if I enlarge the viewport. I reworded the question to reflect this.


#6

but specifically in the banner, which to me is important in order to isolate it. Other sections may at some point also have buttons that may have different styles. The btn class is on the anchor, so they are interchangeable in this context.


#7

Gotcha. I was only thinking in terms of this project. I should start to code as if it was a real life project that may change.


#8

I'm not able to reproduce your disappearing background. Will DM you my CSS for you to compare.


#9

Got it! Thanks for that. I must have deleted the background-color under .banner. Weird because it showed without it on smaller screens. Thanks again!


#10

That is because of the media query. Scroll to the bottom of the style sheet to see that.


#11

I must have read that line a hundred times. Still it seems so obvious once you point it out. lol


#12

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