html, css, flexbox, vw unit

Community feedback

• 

  Luis paz•390

  @PazispeacePosted over 2 years ago

  Hi there aKennich! Nice solution :). I have some feedback that might help.

  • First of all I would recommend you to use rem unit instead of em unit (you will have some troubles using em unit if you don´t know when to use it) rem vs em Units in CSS

  • Set a max width to the card so the card does´t get bigger and bigger, I tried with 21 rem and works fine! Avoid using % in this case since it will always take the 40 % of its container, and its container is the body (which does not have a fixed width)

  .card {
      max-width: 21rem;
      background-color: hsl(216, 50%, 16%);
      border-radius: 1rem;
      font-family: 'Outfit', sans-serif;
      padding: 1rem;
  }
  

  • I think you forgot to add to the span of "Jules Wyvern" a white color hehe

  span.cyan{
      color:hsl(0, 0%, 100%);
  }
  

  Change the em unit for rem so you won´t have troubles with sizes : - )

  happy coding, wish you a nice day! :D

  0

  ---

  

  aKennich•160

  @akennichPosted over 2 years ago

  @Pazispeace Thank you very much Luis, Your comment was for a great help. I am actually confused with em, rem and %. Now I'm trying to get that "eye" when hovering the image. Nice week !

  0