Need Help with MOVE - supporting content


#1

Hi--

I can't seem to get the supporting content to line up horizontally no matter how I set the "display". HTMLand CSS below:







<div class="main">
  <h1>MOVE</h1>
  <p>Form healthy habits to take your fitness to the next level.</p>
  
  <div class="container">
    <a href="www.codecademy.com">START NOW</a>
  </div>
</div>

<div class="supporting">
  <div class="container">
    <div class="col">
      <h2>Move</h2>
      <p>Become more active by tracking your runs, rides, and walks.</p>
      <h2>Sync</h2>
      <p>Access your activity on your phone, tablet, or computer.</p>
      <h2>Compete</h2>
      <p>Set personal challenges and see how you rank against your friends</p>
    </div>
    
    
    <div class="clearfix"></div>
  </div>
</div>


<div class="feature">
 
  <div class="container">
    
  </div>
</div>


CSS:

html, body {
margin: 0;
}

h1, h2, a {
font-family: 'Oswald', sans-serif;
}

p {
font-family: Helvetica, Arial, sans-serif;
}

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

/* Main */
.main {
height: 600px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0 auto;
}

.main h1 {
font-size: 150px;
text-align: center;
color: white;

}

.main p {
font-size: 18px;
text-align: center;
color: white;

}

.main .container a {
text-decoration: none;
color: white;
background-color: black;
display: block;
margin: auto;
text-align: center;
padding: 12px 40px;
width: 5em;
}

/* Supporting */
.supporting {
text-align: center;
padding: 50px 0 80px;
background-color: #1c1c1c;
}

.supporting .col {
width: 28%;
padding: 10px;
}

.supporting h1,
.supporting h2 {
color: #ffa800;
font-size: 20px;
margin-bottom: 10px;

}

.clearfix {
clear: both;
}

.supporting p {
color: #efefef;
margin-bottom: 20px;
line-height: 20px;
font-size: 12px;

}

.supporting .btn {
background-color: #eee;
color: #1c1c1c;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;

}

/* Feature */
.feature {
height: 600px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.feature h1,
.feature h2 {
color: #fff;
font-size: 40px;
margin: 0;
padding:50px 0 0;
}

/* Footer */
.footer {
height: 600px;
}

.footer h1,
.footer h2 {
color: #fff;
font-size: 40px;
margin: 0 0 20px 0;
padding:50px 0 0;
}

.footer p {
color: #fff;
margin: 0 0 20px 0;
font-size: 18px;
}

@media (min-width:600px) {
.main h1 {
font-size: 200px;
}

.supporting .col {
width: 30%;
}

.supporting h2 {
font-size: 40px;
}

.supporting p {
font-size: 14px;
}

.feature h2 {
font-size: 60px;
}


#2

Hi Mike,

Parts of your code have been stripped out, making it so we can't see all of your code. Please edit your post to format your code so we can see it, then reply to this so we'll get a notification :slightly_smiling:


#3

Sorry about that! Hopefully this works...

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>

    <div class="main">
      <h1>MOVE</h1>
      <p>Form healthy habits to take your fitness to the next level.</p>
      
      <div class="container">
        <a href="www.codecademy.com">START NOW</a>
      </div>
    </div>
    
    <div class="supporting">
      <div class="container">
        <div class="col">
          <h2>Move</h2>
          <p>Become more active by tracking your runs, rides, and walks.</p>
          <h2>Sync</h2>
          <p>Access your activity on your phone, tablet, or computer.</p>
          <h2>Compete</h2>
          <p>Set personal challenges and see how you rank against your friends</p>
        </div>
        
        
        <div class="clearfix"></div>
      </div>
    </div>


    <div class="feature">
     
      <div class="container">
        
      </div>
    </div>
    

  </body>
</html>
Raw  style.css
html, body {
  margin: 0;
}

h1, h2, a {
  font-family: 'Oswald', sans-serif;
}

p {
  font-family: Helvetica, Arial, sans-serif; 
}

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

/* Main */
.main {
  height: 600px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0 auto;
}

.main h1 {
  font-size: 150px;
  text-align: center;
  color: white;
  
}

.main p {
  font-size: 18px;
  text-align: center;
  color: white;
  
}

.main .container a {
  text-decoration: none;
  color: white;
  background-color: black;
  display: block;
  margin: auto;
  text-align: center;
  padding: 12px 40px;
  width: 5em;
}


/* Supporting */
.supporting {
  text-align: center;
  padding: 50px 0 80px;
  background-color: #1c1c1c;
}

.supporting .col {
  width: 28%;
  padding: 10px;
  }

.supporting h1,
.supporting h2 {
  color: #ffa800;
  font-size: 20px;
  margin-bottom: 10px;
 
}

.clearfix {
  clear: both;
}

.supporting p {
  color: #efefef;
  margin-bottom: 20px;
  line-height: 20px;
  font-size: 12px;
 
}

.supporting .btn {
  background-color: #eee;
  color: #1c1c1c;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  
}

/* Feature */
.feature {
  height: 600px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.feature h1,
.feature h2 {
  color: #fff;
  font-size: 40px;
  margin: 0;
  padding:50px 0 0;
}

/* Footer */
.footer {
  height: 600px;
}

.footer h1,
.footer h2 {
  color: #fff;
  font-size: 40px;
  margin: 0 0 20px 0;
  padding:50px 0 0;
}

.footer p {
  color: #fff;
  margin: 0 0 20px 0;
  font-size: 18px;
}


@media (min-width:600px) {
  .main h1 {
    font-size: 200px;
  }

  .supporting .col {
    width: 30%;
  }

  .supporting h2 {
    font-size: 40px;
  }

  .supporting p {
    font-size: 14px;
  }

  .feature h2 {
    font-size: 60px;
  }
}

#4

html, body {
  margin: 0;
}

h1, h2, a {
  font-family: 'Oswald', sans-serif;
}

p {
  font-family: Helvetica, Arial, sans-serif; 
}

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

/* Main */
.main {
  height: 600px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0 auto;
}

.main h1 {
  font-size: 150px;
  text-align: center;
  color: white;
  
}

.main p {
  font-size: 18px;
  text-align: center;
  color: white;
  
}

.main .container a {
  text-decoration: none;
  color: white;
  background-color: black;
  display: block;
  margin: auto;
  text-align: center;
  padding: 12px 40px;
  width: 5em;
}


/* Supporting */
.supporting {
  text-align: center;
  padding: 50px 0 80px;
  background-color: #1c1c1c;
}

.supporting .col {
  width: 28%;
  padding: 10px;
  }

.supporting h1,
.supporting h2 {
  color: #ffa800;
  font-size: 20px;
  margin-bottom: 10px;
 
}

.clearfix {
  clear: both;
}

.supporting p {
  color: #efefef;
  margin-bottom: 20px;
  line-height: 20px;
  font-size: 12px;
 
}

.supporting .btn {
  background-color: #eee;
  color: #1c1c1c;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  
}

/* Feature */
.feature {
  height: 600px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.feature h1,
.feature h2 {
  color: #fff;
  font-size: 40px;
  margin: 0;
  padding:50px 0 0;
}

/* Footer */
.footer {
  height: 600px;
}

.footer h1,
.footer h2 {
  color: #fff;
  font-size: 40px;
  margin: 0 0 20px 0;
  padding:50px 0 0;
}

.footer p {
  color: #fff;
  margin: 0 0 20px 0;
  font-size: 18px;
}


@media (min-width:600px) {
  .main h1 {
    font-size: 200px;
  }

  .supporting .col {
    width: 30%;
  }

  .supporting h2 {
    font-size: 40px;
  }

  .supporting p {
    font-size: 14px;
  }

  .feature h2 {
    font-size: 60px;
  }
}

#5

@schindler_mikegmail_ Sorry for the slow reply!

So since you're using Bootstrap, which has a grid system built in, you should take advantage of it. Their grid uses twelve columns, which is common, and you have three items that you want to split that space evenly. So, you should encase each item (Move, Sync, Compete) in it's own column, like this:

<div class="col-md-4">
  <h2>Title</h2>
  <p>Text</p>
</div>

By the way, you might want to change your username, since it shows your email address right now :slightly_smiling: