css grid

Community feedback

• 

  P

  Natalie Smyth•340

  @nataliesmyth

  Posted 8 months ago

  Nice job! I have a few suggestions to get your solution as close to the design as possible. First, the background color for the body is set to a different color than the design, which is an easy fix.

  body {
  background-color: #e9f5f0; // change this color
  }
  

  Second, if you add border: none; to your button element, the outline will go away.

  I'm not sure what you mean about your media queries, but this is a good project to practice on because there are only two sizes. My advice is to start with the one size, get it looking the way you want at that set size, and then add a media query to adjust the width and whatever else needs to be adjusted. I would start with mobile, and once that's done create a media query for the larger container, like this:

  .container {
  code: here;
  }
  
  @media (min-width: 500px) {
    .container {
      changes: here;
    }
  }
  

  in the above example, the changes would take place when the screen is larger than 500px. Hope that helps!

  02