My <h1> and <p> are spaced out and it is a mystery why


#1

hi there,

I'm having trouble getting the text (and button underneath) nearer to the 'MOVE' header. What am I missing?

many thanks,

charlie

/* Main */
.main {
  height: 600px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg);
  text-align: center;
	padding-top: 1px;
}

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

.main p {
  font-size: 18px;
  color: white;
  text-align: center;
}
.btn {
  font-size: 18px;
  text-transform: uppercase;
  color: white;
  height: 20;
  width: 80;
  background-color: #1c1c1c;
  padding: 8px 30px;
  display: inline-block;
  text-decoration: none;
}


#2

Ok I think I've fixed - but have I fixed in the most efficient/'correct for learners' way?

I've added in a 'line-height' of 0 and a margin of what looks about right 225px.

Why was the line-height not set to 0 as default? If anyone can help me with what I'm missing I would be very grateful!

Many thanks,

C

.main h1 {
font-size: 150px;
text-transform: uppercase;
color: white;
text-align: center;
line-height: 0;
margin-top: 225px;
}


#3

can you post your full html and css code? I need the html code as well to troubleshoot this problem


#4

My issue was the default stylesheet that comes with browsers was setting that title's margins by more than was set in the 'model' example given. I now know that you can negate that default by adding padding or other simple things like that.

Here's my HTML anyway. Many thanks!

   <div class="main">
      <div class="container">
        <h1>Move</h1>
        <p>Form healthy habits to take your fitness to a whole new level</p>
        <a class="btn" href="#">Start Now</a>
      </div>
    </div>

#5

i am unable to reproduce the problem with your faulty code, i put the code in a bin, but as you can see everything is fine.


#6

hmm strange. i had enough problem with the problem, to then work out what's gone on here is maybe above me at this stage. thank you so much for taking the time for helping me out stetim!

Charlie


#7

you could post your full html and css code? maybe there is something in there, which can help me identify the problem? Or if you are just fine with using the line-height, that is also fine


#8

Here it is - I think it's got to do with the in built browser stylesheets. Any insight you have would be brilliant!

Many thanks,

C

<!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">
      <div class="container">
        <h1>Move</h1>
        <p>Form healthy habits to take your fitness to a whole new level</p>
        <a class="btn" href="#">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>
        </div>
        <div class="col">
          <h2>Sync</h2>
          <p>Access your activity on your phone, tablet, or computer.</p>
        </div>
        <div class="col">
          <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">
        <h2>MOVE. REST. RECOVER. MOVE.</h2>
      </div>
    </div>
       <div class="supporting">
      <div class="container">
          <h2>GO PREMIUM</h2>
          <p>Receive recommendations based on your activity to level up.</p>
          <a class="btn" href="#">learn more</a>
         </div>
          </div>
    <div class= "footer">
      <div class="container">
        <h2>STOP SCOLLING START MOVING</h2>
          <a class="btn" href="#">boombatagadoshialaka</a>
      </div>
      </div>
       

  </body>
</html>

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);
  text-align: center;
	padding-top: 1px;
}

.main h1 {
  font-size: 150px;
  text-transform: uppercase;
  color: white;
  text-align: center;
  line-height: 0; 
  margin-top: 225px;
}

.main p {
  font-size: 18px;
  color: white;
  text-align: center;
}
.btn {
  font-size: 18px;
  text-transform: uppercase;
  color: white;
  height: 20;
  width: 80;
  background-color: #1c1c1c;
  padding: 8px 30px;
  display: inline-block;
  text-decoration: none;
}

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

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

.supporting .col2 {
  width: 28%;
  padding: 10px;
  text-align: center;
}

.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;
  display: inline-block;
}

/* Feature */
.feature {
  height: 600px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg);
}

.feature h1,
.feature h2 {
  color: #fff;
  font-size: 70px;
    margin: 0;
    padding: 50px 0 0;
  text-align: center;
  position: relative;
  top: 200px;
}

/* Footer */
.footer {
  height: 600px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/footer.jpg) no-repeat center center;
  text-align: center;
  background-size: center;
}
.footer .container {
    position: relative;
    top: 200px;
}

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

.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;
  }
}

#9

in a sense it has to do with the default stylesheet, remember that we concluded that the h1 heading (which is a block level element) has a huge margin?

see in this simple example what margin-bottom does the element below it. the same is happening in your case, the h1 margin is pushing the button down

to overcome this problem, you could simple remove the margin-bottom from h1

the interesting thing about line-height is that it make the content have a height of zero, the content was huge, and then you removed it.

This is a difficult thing to understand, the text is still there, but the browsers see the content as a height of zero (zero lines)

you should google how to the inspector (to inspect elements), and then try this on jsbin (it works badly in the codecademy lessons) to see how this all works and fit togethe


#10

Ah I see what you're saying. All makes a lot of sense - thank you.


#11

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