HTML5, SaSS

Community feedback

• 

  

  Mike Hayden-Moore•1,005

  @mickyginger

  Posted almost 4 years ago

  Hey Nabil! 👋

  You've done a great job here, so well done! 🎉

  I think there may be a simpler way to position your cards. Generally I would avoid absolute positioning if you can possibly help it.

  How about this for your tablet styles:

  .cards {
    display: flex;
    flex-direction: row;
    max-width: 700px;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  
  .cards .card {
    margin-bottom: 10px;
  }
  

  Then update them on desktop like so

  .cards {
    max-width: 1120px;
  }
  
  .cards .card {
    margin-bottom: 25px;
  }
  
  .cards .card:nth-child(1), .cards .card:nth-child(4) {
    transform: translateY(-50%);
  }
  

  Using transform: translateY is nice because you don't have to set explicit sizes, so the card will always move by half its own height, regardless of the content.

  Hope that helps! 🤓

  21

  Marked as helpful
• 

  dewslyse•3,005

  @dewslyse

  Posted almost 4 years ago

  Nice work on the challenge Nabil. Everything seems clean. Well done 👏 👏 . My only suggestion would be to center content to the page. Happy coding and best of luck with subsequent challenges.

  11

  Marked as helpful