profile-card-component using flexbox and CSS custom properties

Community feedback

• 

  Abhik•4,840

  @abhik-bPosted almost 3 years ago

  👋 Hello Christ Kevin , Your solution looks nice & your code looks clean as well. I particularly liked the fact that you described in alt that Victor is in vacation with his family & what he is wearing so that users who can not see the picture can understand, Well Done 😅. However I think if you try below mentioned opinions your solution can become perfect .

  • instead of background-size use background-position with values like this right calc(50vw - 5%) bottom 50vh , left calc(50vw - 5%) top 50vh (I actually played with those values until I got the right result )
  • use the background-image & its related properties on body instead of html
  • reduce the font-size of article h1 to make it look nicer

  Other than those your solution is good & Please keep up with this nice solutions 👍

  Marked as helpful

  1
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @Christ-Kevin ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  • On smaller devices, card goes over screen, and I think max-width: 100% can solve this issue.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.

  https://www.frontendmentor.io/solutions/profile-card-solution-m-cH4D2Lp

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  1