Four Card Solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Andres Guevara, congratulations for your new solution!

  Here's some tips to improve your solution:

  First of all you need to make smaller the gap between the cards, a good way to do that is giving the container a limit of how much it can grow, you can give it to the container using max-width and set the spacing using gap and use margin: 0 auto to force the alignment.

  Here's the changes I give your code:

  @media (min-width: 1200px)
  .container {
      max-width: 1110px;
      /* width: 100vw; */
      margin: 0 auto;
      height: 100vh;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(5, 1fr);
      justify-items: center;
      align-items: center;
  }
  

  Then you need to remove the grey background from the container and insert it to the body to make the color fill all the screen.

  👋 I hope this helps you and happy coding!

  0
• 

  Suraj Raju Hadage•670

  @SurajHadagePosted over 2 years ago

  To make color lines on each card you are using pseudo elements. I will recommend to use border-top property:

   .card--green {
      border-top: 2px solid green;
  }
  

  I will suggest to not wrap <header> inside <main>.

  0