Question regarding CSS Grid: PupSpa

In this exercise

The image inside of the header differs greatly from the video compared to what I see on my screen.

Video

My Screen:

My code.

body {
  background-color: #ffffff;
  color: #db6363;
  text-align: center;
}

.grid {
	display: grid;
  grid-template: 5% 30% 10% 30% 20% 5% / repeat(6, 1fr);
  grid-column-gap: 20px;
}

header {
  background-color: #ffffff;
  color: #dc6363;
  padding-top: 10px;
  grid-column: 1 / 7;
}

.banner {
  background-color: #db6363;
  color: #ffffff;
  font-family: Poppins;
  font-size: 84px;
  font-weight: 300;
  letter-spacing: 3.7px;
  color: #ffffff;
	grid-column-start: 1;
  grid-column-end: 7;
}

img {
  max-width: 100%;
}

.about {
  background-color: #f0f0f0;
  padding-bottom: 20px;
	grid-column-start: 1;
  grid-column-end: 7;
}

.text {
  width: 50%;
  height: 100%;
  margin: auto;
  padding: auto;
  color: #2f2d2d;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.5px;
  padding-top: 30px;
}

.box {
  background-color: #2f2f2f;
  color: #ffffff;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.address {
	grid-column: 1 / span 2;
}

.hours {
	grid-column: 3 / span 2;
}

.call-us {
	grid-column: 5 / span 2;
}

.marker {
  width: 51px;
  height: 82px;
}

.clock {
  width: 75px;
  height: 75px;
}

.phone {
  width: 98px;
  height: 79px;
}

.testimonial {
  margin: auto;
  padding: auto;
  background-color: #f0f0f0;
  color: #db6363;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 3.7px;
  font-style: italic;
}

.one {
	grid-column: 1 / span 3;
}

.two {
	grid-column: 4 / span 3;
}

footer {
  background-color: #db6363;
  color: #ffffff;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.4px;
	grid-column-start: 1;
  grid-column-end: 7;
}


@media(max-width: 600px){

  .grid {
    grid-template: 5% 30% 10% repeat(3, 10%) repeat(2, 10%) 5% / 100%;
    grid-row-gap: 20px;
  }

  header {
		margin-bottom: -20px;
  }

  .banner {
    font-size: 20px;
    font-weight: 300;
    line-height: 2.75;
    letter-spacing: 1.9px;
 		margin-bottom: -20px;   
  }

  .dog {
    width: 195px;
    height: 237px;
    padding-left: 50px;
  }

  .about {
		margin-bottom: -20px;
  }

  .text {
    width: 75%;
    padding-top: 50px;
    padding-bottom: 50px;
    font-size: 14px;
    font-weight: 500;
  }

  .box {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
  }

  .address {
		grid-row: 4 / span 1;
  	grid-column: 1 / span 1;
  }

  .hours {
		grid-row: 5 / span 1;
  	grid-column: 1 / span 1;
  }

  .call-us {
		grid-row: 6 / span 1;
  	grid-column: 1 / span 1;
  }

  .marker {
    width: 25.5px;
    height: 40.4px;
  }

  .clock {
    width: 37.6px;
    height: 37.5px;
  }

  .phone {
    width: 49px;
    height: 39.5px;
  }

  .testimonial {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
  }

  .one {
		grid-row: 7 / span 1;
  	grid-column: 1 / span 1;
  }

  .two {
		grid-row: 8 / span 1;
		grid-column: 1 / span 1;
  }

  footer {
		margin-top: -20px;
  }

}

Did I miss a step? Do something wrong?

Take a look at this thread, maybe it’ll help out:

1 Like