Profile page with BEM naming convention

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Ciao Vittorio, congratulations for your solution!

  I've inspected the code of your solution and I note that you've used BEM, congrats for that, you've done a good structure, to be sincere I don't like BEM because the classes are really long, but I cannot deny that's useful, so you did good by starting to use this css naming convetion.

  About your code I've some tips for you:

  • You card component is responsive and this good, but note that the profile image isn't resizing as the other contents and the card stats start to behave strange when the window gets under width: 300px; one way to fix that is using flex-wrap: wrap; or that you create a media query to change this section direction. Here's the fix:

  .card__content__stats {
      /* display: flex; */
      flex-wrap: wrap;
      margin-top: 2rem;
      border-top: 1px solid rgb(232, 232, 232);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2rem 3rem 2rem 3rem;
  }
  
  @media (max-width: 280px) { .card__content__stats {flex-direction: column;}}
  

  Hope it helps you and happy coding!

  Marked as helpful

  0