profile-card

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey there, your solution is pretty close to design excellent work! Some suggestions to improve the project:

  • To center the card correctly you simply need to change align-content to align-items: center on your .body element. In this case you won't need margin: 150px 0; on your container.
  • Also for best practice try to get use to not giving height to container elements. You can simply remove height: 380px and it won't change the result. It's more convenient to always let the children define it's parent height by using margin, padding etc. Won't matter much for a static card, but once you start working on bigger & dynamic projects, setting height might cause overflowing issues.
  • You can remove left: 122px from img. If you wish perfectly center an absolute element horizontally, you can do so as:

  img {
    ...
    left: 50%;
    transform: translateX(-50%);
  }
  

  • Using a level one heading per page will result in better SEO. For this challenge instead of <bold> you can use <h1> for name. The card is about Victor Crest so we can use <h1> there. Other than these nice work again! Happy coding :)

  Marked as helpful

  0

  ---

  

  Glow•140

  @TheAwesomeTechGirlPosted about 2 years ago

  @ErayBarslan Thank you for the corrections.

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  Hello again Glow! Congratulations for your new solution!

  I saw you solution live preview and the code in the repository and I've some tips for you/

  The card is not responsive yet because you've used width: 330px in the container that's a fixed property, replace it with max-width to allow the container to contract when the screen scales down. Remember that for flex elements you don't need to declare the height, the container grows with the content side automatically.

  Hope it helps, happy coding 👋

  Marked as helpful

  0

  ---

  

  Glow•140

  @TheAwesomeTechGirlPosted about 2 years ago

  @correlucas Correction made ,Thank you soo much.

  0