This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Make a Website: Bootstrap Forum

View Course » View Exercise

535 points
53f819e6548c35465b003344_667056959
Submitted by
AdnanSkb1
almost 3 years ago

My learn more paragraphs look weird

Its very hard to explain but I will try. The paragraphs in my learn more section are not aligned or stacked right. One of the paragraphs instead of stacking on top of each other goes right next to the other one. Here's the link. Thanks!
Web Design


1 vote

permalink

Really need to see your code to give any useful advice AdnanSkb1.

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
almost 3 years ago

2 Comments

53f819e6548c35465b003344_667056959 AdnanSkb1 almost 3 years ago

My code was really messy so I did not want to trouble you. I thought the link would take you to my whole build, sorry. Ill post the code down below.

55df2afa95e3787b9200005e_359368177 Judy almost 3 years ago

Could we see your index.html please?


1 vote

permalink

You probably don't want make every p element into it's own div element as you have done. It will help you see what you are building if you can line up your matching open/close tags at the same indent level.

I've marked a few things but there is more to fix. Take it slowly, and keep it tidy, that will help.

<div class="learn-more">
<div class="container">

   <div class="row">

      <div class="col-md-4">
      </div>

      <h3>Why Wait?</h3>
      <div>
         <p>Join today</p>
      </div>
      <div>
         <p><a href="#">See all the courses</a></p>
      </div>

   </div>  <!-- this is where you row is ending -->

   <div class= "col-md-4">
      <div>
         <h3>Learn</h3>
      </div>
      <div>
         <p>We offer various courses on film-making all for free!</p>
      </div>
      <p><a href="#">Learn more about what it takes to make it big</a></p>
   </div>

   <div class= "col-md-4">
      <h3>Whatever your heart desires</h3>
      <p>Wherever you want to go and whatever you want to do we will help you survive and thrive</p>
      <div>
         <p><a href="#">Sign Up</a></p>
         <div>  <!-- another empty div here -->
         </div>
      </div>
   </div>

</div>  <!-- this ends the container div -->
<!-- there is not end tag for the learn-more -->

3691 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
almost 3 years ago

1 Comment

53f819e6548c35465b003344_667056959 AdnanSkb1 almost 3 years ago

Thanks Albions! I will keep on trying to fix it!


0 votes

permalink

main.css:

.nav a {
  color: #5a5a5a;
  font-size: 10px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.jumbotron {
  background-image:url('http://delhifilmacademy.com/wp-content/uploads/2014/04/1280-cloud-filmmaking-Ripple.jpg');
  height: 500px;
}

.jumbotron .container {
  position: relative;
  top:100px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
  display: inline;
}

.learn-more a {
  color: #00b0ff;

}

.learn-more p {
  display: inline;
}

.neighborhood-guides {
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
}

.neighborhood-guides h2 {
    color: #393c3d;
    font-size: 24px;
}

.neighborhood-guides p {
    font-size: 15px;
    margin-bottom: 13px;
}

 .learn-more h3 p {
  display: inline;
}   

535 points
53f819e6548c35465b003344_667056959
Submitted by
AdnanSkb1
almost 3 years ago


0 votes

permalink

I couldn't post my index.html at first because it was over the word limit I guess. Ill post it in parts.

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">

  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class= "pull-left">
          <li><a href="#">Name</a></li>
          <li><a href="#">Learn</a></li>
          <li><a href="#">Teach</a></li>
        </ul>
        <ul class= "pull-right">
          <li><a href="#">Sign In</a></li>
          <li><a href="#">Register</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h1>Learn to Film</h1>
        <p>Get to explore your artistic self</p>
        <a href="#">Learn More</a>
      </div>
    </div> 

    <div class= "neighborhood-guides">
        <div class= "container">
        <h2> See How To Make It </h2>
        <p> Not only how to make a film but how to make it into and survive the film world. </p>

    <div class="row">

      <div class="col-md-4">
      <div class="thumbnail">
      <img src="http://www.d.umn.edu/theatre/umd-theatre-minor-film-studies_files/960x400_filmstudies-minor2.jpg">
     </div>

     <div class="thumbnail">
      <img src="http://www.makindia.com/images/upload_banner/8230_20130626211930.jpg">
     </div>
     </div>

      <div class="col-md-4">
      <div class= "thumbnail">
        <img src="http://i57.tinypic.com/x6cw3r.jpg">
      </div>
        </div>

535 points
53f819e6548c35465b003344_667056959
Submitted by
AdnanSkb1
almost 3 years ago


0 votes

permalink

Part 2:

<div class="col-md-4">
      <div class= "thumbnail">
        <img src="http://i58.tinypic.com/vq1r1y.jpg">
          </div>
          </div>


    <div class="learn-more">
      <div class="container">
        <div class="row">

     <div class="col-md-4">
     </div>

            <h3>Why Wait?</h3>
            <div>
            <p>Join today</p>
            </div>
            <div>
            <p><a href="#">See all the courses</a></p>
           </div>     
          </div>

          <div class= "col-md-4">
          <div>
            <h3>Learn</h3>
            </div>
            <div>
            <p>We offer various courses on film-making all for free!</p>
            </div>
            <p><a href="#">Learn more about what it takes to make it big</a></p>

          </div>

          <div class= "col-md-4">
            <h3>Whatever your heart desires</h3>
            <p>Wherever you want to go and whatever you want to do we will help you survive and thrive</p>
            <div>
            <p><a href="#">Sign Up</a></p>
            <div>
          </div>

        </div>
      </div>
    </div>
  </body>
</html>

535 points
53f819e6548c35465b003344_667056959
Submitted by
AdnanSkb1
almost 3 years ago

1 Comment

55df2afa95e3787b9200005e_359368177 Judy almost 3 years ago

The first think in your learn-more div that I notice is this empty column: