four card solution with flexbox

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted 22 days ago

  Hey Chris, nice job.

  You were close, all you need is wrapping card-2 and 3 with another div, a bit spacing (margin-bottom: 20px; to card-2 maybe) and align-items: center; to the .card-container

  <div class="card-container">
          <div class="card card-1">
           ...
          </div>
  
      <div>
          <div class="card card-2">
           ...
          </div>
          <div class="card card-3">
           ...
          </div>
      </div>
  
          <div class="card card-4">
           ...
          </div>
        </div>
  

  .card-container {
      display: flex;
      /* flex-wrap: wrap;  */ /* I disabled this because just before the media query it was becoming odd, you might wanna change your media query around 820px or 50rem */
      justify-content: center;
      gap: 20px;
      margin-top: 40px;
  
      align-items: center;
  }
  

  For the icons; you can give flex to each card div and align-self to the icons or you can use grid, absolute/relative positioning.

      .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      /* text-align: center; */ /* Texts are not centered on the design */
      width: 250px;
  
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* To have an even spacing between texts and icon */
      }
  

  .card img {
      width: 40px;
      height: 40px;
      align-self: flex-end;
  }
  

  For visual flexbox tricks and other things i recommend you to check this page

  Marked as helpful

  2