Four Card Feature Section using SASS and CSS Grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hey Deborah, congrats for this amazing solution!

  Here's one observation:

  For some reason after max-width: 650px the cards stop to stretch 100% of the width and get aligned left, maybe you need to apply the alignment with grid to avoid it with a new media query:

  .cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.7rem;
      align-items: center;
      justify-items: center;
  }
  

  Use the standard vertical alignment to make sure the content will be ever in the centered:

  body {
      min-height: 100vh;
      margin: 0;
      padding: 0;
      padding: 2rem;
      display: flex;
      justify-content: center;
      font-family: "Poppins", sans-serif;
      background-color: hsl(200deg, 100%, 99%);
      align-items: center;
  }
  

  Hope this helps, keep it up =)

  Marked as helpful

  1

  ---

  

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  @correlucas Thank you again for the feedback Lucas! Yes I noticed that I had a problem with alignement but I thought I had fixed it but probably not for all screens. I will apply your corrections. Thank you! You’re the best! ✨

  1