HTML Project - Bass


#1



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


The issue is in the mobile & large screen view. Background color is not seen in large screen view whereas in mobile view background color gets loaded but placement is not proper; there are white spaces. Please help.


<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel='stylesheet' href='style.css'/>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato">
  </head>
  <body>
    <div class="jumbotron">
      <div class='container'>
        <div class="header">
          <div class='row'>
            <div class='col-md-3 col-xs-3'>
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bass/logo.svg" width='100'/>
            </div>
            <div class='col-md-9 col-xs-9'>
              <ul>
                <li>Features<li>
                <li class="borderLi">Download<li>
              </ul>
            </div>
          </div>
        </div>
        <div class="main">
          <div class="row">
            <div class='col-md-7 col-xs-7'>
              <h1>Turn Up the Bass</h1>
              <p class="lead">From the newest releases to classic albums, we have the best music for you to enjoy.</p>
            </div>
          </div>
        </div>
      </div>  
    </div>
    
    <div class='supporting1'>
      <div class='col-md-6'>
          <img src='https://s3.amazonaws.com/codecademy-content/projects/bass/you.svg'/>
      </div>
      <div class='col-md-6'>
        <h2>Music Just for You</h2>
        <p class='lead'>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p>
      </div>
    </div>
    
    <div class='supporting2'>
        <div class='col-md-6'>
          <h2>Music Just for You</h2>
        <p class='lead'>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p>
      </div>
      <div class='col-md-6'>
          <img src='https://s3.amazonaws.com/codecademy-content/projects/bass/everywhere.svg'/>
      </div>
    </div>
    
    <div class='supporting3'>
        <div class='col-md-6'>
          <img src='https://s3.amazonaws.com/codecademy-content/projects/bass/connect.svg'/>
      </div>
      <div class='col-md-6'>
          <h2>Music Just for You</h2>
        <p class='lead'>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p>
      </div>
    </div>
    
  </body>
</html>

CSS Code..

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Lato';
  color:white;
}

.jumbotron{
    background-image: url('https://s3.amazonaws.com/codecademy-content/projects/bass/bg.jpg');
  background-size: cover;
  height: 600px;
}
.header ul{
    list-style: none;
  float:right;
}

.header ul li{
    display: inline-block;
  font-weight: 800;
  position:relative;
  top: 40px;
}

.header ul li:first-child{
    margin-right: 40px;
}

.borderLi{
    border: 1px solid #FF003D;
  padding: 5px 25px;
  background-color: #FF003D;
}

.jumbotron .main h1{
    margin-top: 100px;
}

.supporting1, 
.supporting3{
  background-color: #161718;
  
}

.supporting2{
    background-color: #000000;
}


#2

Hi,

Have you managed to solve this or still need help ?


#3

Not sure if this will help but one thing you didn't do was create a row class in your supporting sections (under supporting 1. You could also enter the width and height in the html.