css grid

Community feedback

• 

  P

  Natalie Smyth•340

  @nataliesmythPosted about 1 month 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!

  0

  ---

  

  moses ayodele•150

  @mowzayoPosted about 1 month ago

  yes it helps .what i meant by media query is ,first of we're suppose to do for 375, after which if screen adjust to 500 its likely yo lose its smaller screen shape. question here is 'do i have to media query for all screen size ?@nataliesmyth

  0

  

  P

  Natalie Smyth•340

  @nataliesmythPosted about 1 month ago

  @mowzayo You don't need to have media queries for both. Pick a screen size that you are starting with (i'd recommend starting with the mobile design) and get the styling the way you want, and then use the media queries to adjust the styling as needed for the larger screen size. If you start with mobile, your media query would be for the min-width, meaning the styling in the media query only shows up when the screen is the size you set or larger.

  0