Codecademy Forums

CSS Grid Layout percentage didn't work well

Hi, I’ve just found some problems with my CSS grid project: pup spa.
Unlike the video, my grid which had a value of percentage didn’t work well.
And I’ve found this update: Update behavior of CSS Grid Layout percentage row tracks and gutters(https://www.chromestatus.com/feature/6708326821789696)

Because of that update, my gird didn’t work. What should I do solve this problem?
I think specifying the intrinsic height and width is the solution for this. Is it right?
Then, How can I set up this for responsive design? Should I set up a fixed value whenever I use percentage gird?

Here is my code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PupSpa</title>
      <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
      <link rel='stylesheet' type='text/css' href='style.css'>
      <link rel='stylesheet' type='text/css' href='reset.css'>
  </head>

  <body>
    <div class="grid">

      <header>
        <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-i/images/pup-spa.svg" class="logo">
      </header>

      <div class="banner">
        <p>The #1 Dog Spa in NYC!</p>
        <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-i/images/dog.svg" class="dog">
      </div>

      <div class="about">
        <p class="text">We are a full service grooming salon and doggy daycare. PupSpace is founded on the principles of communication and specialized care. We welcome you to your dog's new second home.</p>
      </div>

      <div class="box address">
          <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-i/images/marker.svg" class="marker">
          <p>ADDRESS:
          <br>233 Lewis Avenue,
          <br>Brooklyn, NY 11233</p>
      </div>

      <div class="box hours">
          <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-i/images/clock.svg" class="clock">
          <p>HOURS:
          <br>Mon-Fri 8:00 AM - 9:00 PM
          <br>Sat-Sun 7:00AM - 11:00 PM</p>
      </div>

      <div class="box call-us">
          <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-i/images/telephone.png" class="clock">
          <p>CALL US:
          <br>718-324-6751</p>
      </div>

      <div class = "testimonial one">
        <p>"PupSpa is a first class doggie grooming operation. My pug VanDyke always comes back looking so fresh. Thanks guys!"
          <br> - Dan </p>
      </div>

      <div class = "testimonial two">
        <p>"Lua (my shiba inu) and I are HUGE fans of PupSpa! Ryan and his crew are always so generous with their time."
          <br> - KC </p>
      </div>

      <footer>
        <p>️&copy; PupSpa 2017</p>
      </footer>

    </div>
  </body>

</html>
body {
  background-color: #ffffff;
  color: #db6363;
  text-align: center;
  width: 100%;
  height:100%;
}

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

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

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

img {
  max-width: 100%;
}

.about {
  background-color: #f0f0f0;
  padding-bottom: 20px;
  grid-column: 1 / span 6;
}

.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 {

}

.two {

}

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


@media(max-width: 600px){

  .grid {

  }

  header {

  }

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

  }

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

  .about {

  }

  .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 {

  }

  .hours {

  }

  .call-us {

  }

  .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 {

  }

  .two {

  }

  footer {

  }

}

1 Like

I’m having the same problem. The project is not possible to finish because the row percentages mess it all up, and for a beginner it’s hard to figure it out.

I tried changing the row percentages to fractions, and for a couple of steps it worked (made the result match the one in the video), but it quickly became messed up again.

Please, update the steps to the project, or provide some of information in the course on how to deal with this.

Thank you.

Could you show me what it looks like currently and what it should look like?

I haven’t looked in depth, but it looks like the problem is that you now need to specify the height. I’m not sure exactly what is wrong with your code.

Sadly, I cannot do that anymore. I had access to the exercise as part of the Pro Trial, which has already ended.

In the video, the adjusted grid (in the first few steps) looked squished and strecthed, but it had a clear structure. What happened to my grid, was that it got distorted and some of the information got lost during the shifting. At first I thought that it was some fault in my code, so I restarted the exercise and tried following the video, but the result was the same, and did not look like the video.

I’ll come back to the exercise once I get the Pro Membership, but for now, that’s all I the info I can tell you.

Hope this helps.

I also had a similar problem. My grid layout seemed ok, but a lot of the alignment was off, empty space where it shouldn’t have been, dog image mostly hidden in the “desktop” view etc.

I checked my code with the video, and that confirmed it was correct in terms of what the task instructions required. However, what was displayed on my screen was different to the video. Also, the video was pretty rushed and didn’t even show the full-screen “desktop” view, only the “mobile” view. And the amendment made to add rows to the grid-template-rows declaration for the @media query was different in the video to the code given in the hint for task 11 of the project.

As my overall grid layout seemed ok, I’ve adjusted the following, and ended up with a much more satisfactory result:

  • % height of rows in both grid-template declarations (i.e. for both “desktop” and “mobile” views)
  • font-size for various elements;
  • max-width property for the dog image;
  • padding for various elements;
  • width and height values for the .marker, .clock and .phone class selector rules. The HTML class value was also wrong for the telephone image - so I changed this as well from class="clock" to class="phone".

I’ve also added the following grid-area declarations to the @media query, and this has corrected the unaligned width of some rows in the “mobile” view, and removed the horizontal scroll bar which was a consequence of this.

header {
    grid-area: 1 / 1 / 2 / 2;
}
.banner {
    grid-area: 2 / 1 / 3 / 2;
}
.about {
    grid-area: 3 / 1 / 4 / 2;
}
footer {
    grid-area: 9 / 1 / 10 / 2;
}
1 Like

Somebody, please post a link to this exercise. Thank you, in advance.

https://www.codecademy.com/learn/learn-css

Lesson 6 - Learn CSS: Grid
CSS Grid: PupSpa (the first project, comes after CSS Grid Essentials interactive lesson)

That’s the most I can do as a Regular member. Hope this helps.

https://www.codecademy.com/courses/learn-css/projects/pupspa

:+1:

1 Like

I just did this project today and encountered the same problem. After searching and finding this post, I added “height: 1200px” to the grid, and it worked. Not sure what I did is right, hope someone could give some explanations and suggestions.

I just “finished” this project and am having the same problems. Not really sure how to fix it.

Just did it, still functioning strange. Pretty sure what I did is not correct since it’s over 100%, but for the desktop version, I changed the grid-template row percentages to:

grid-template: 5% 60% 11% 15% 20% 0.5% / repeat(6, 1fr);

And it works perfectly!

I may check back here in the future, but for now moving on.

Just a shot in the dark, I haven’t loaded your code, but if percentage doesn’t work anymore, and you want responsive sizing of grid, maybe try the viewport units?

https://www.w3schools.com/cssref/css_units.asp

1 vh or 1 vh == 1% of horiz or vert viewport respectively.

Maybe grid will respond better to those units.

I’m having a similar issue with this one. I changed the row heights to 5% 30% 20% 20% 20% 5% and that seemed to get the desktop version pretty close to what it is supposed to look like. The mobile version is still messed up for me though. Just seems like there is something off in the sizing of the rows.