Step 1 Background Question


#1


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


Had a few problems with the background---mainly the size and position. I resolved most of the them, but what stumped me was a gray bar at the top. I fixed it with (padding-top: 5px;) but that solution is not in the source code of the solution page. Also I had to add much more padding (padding-top: 95px;) in order to get the container and its elements into the desired position. That is also lacking from the solution page.

My solution was effective, but why are my additional lines of code necessary? Is this the most efficient way to resolve the problem? The code below is my final code.

original problem (using same code as solution page):


html, body {
  margin: 0;
}

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

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

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

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

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

.main h1 {
  font-size: 150px;
  color: #fff;
  text-transform: uppercase;
  margin: 10px;
}

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

.main .btn{
  background-color: #1c1c1c;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  padding: 8px 30px;
  display: inline-block;
}


/* Supporting */
.supporting {
  text-align: center;
  padding: 50px 0 80px;
}

.supporting .col {
  float: left;
  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;
  display: inline-block;
}

/* Feature */
.feature {
  height: 600px;
}

.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

Did this a long time ago so can't remember the circumstances or if this is what I came up with or what we started with:

margin-top: -135px;

I deplore padding, so rarely reach for it. The above looks like something I would come up with. Just can't be sure.


#3

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