HTML5, SaSS

Community feedback

• 

  T

  Mike Hayden•1,005

  @mickygingerPosted about 3 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! 🤓

  Marked as helpful

  2

  ---

  

  Nabil•160

  @Nabil19911Posted about 3 years ago

  @mickyginger Thank you for the suggestions, I will keep your advice in my mind for the future works.

  0
• 

  dewslyse•3,025

  @dewslysePosted about 3 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.

  Marked as helpful

  1

  ---

  

  Nabil•160

  @Nabil19911Posted about 3 years ago

  @dewslyse Thank you for pointing it out. I have done it, next time I will make sure it done properly

  0