Result summary component

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 months ago

  Hello @tdnguyen04!

  Your project looks great!

  I noticed that you used margin to center the card vertically. SInce you added display flex to it, all you had to do was to also add align-items: center;, like this:

  • Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Tri D Nguyen•20

  @tdnguyen04Posted 10 months ago

  @danielmrz-dev Wow you are right. I couldn't remember why I didn't do that. I have made it right for the horizon. Thanks! :)

  0
• 

  Tenzin Choeda•210

  @tenze21Posted 10 months ago

  why don't you try decreasing the opacity of the colors I think that's what is setting your solution off from the original design.

  0

  ---

  

  Tri D Nguyen•20

  @tdnguyen04Posted 10 months ago

  @tenze21 Oh I will. That makes sense. However, I am not trying to match all the color, but more of finding how to achieve the effect of blending between the circle, so that the upper part will have lighter color than the lower one. Have any ideas about that?

  0

  

  Tenzin Choeda•210

  @tenze21Posted 10 months ago

  @tdnguyen04 Try using a linear-gradient as the background of the score-circle class, .score-circle{ background: linear-gradient(hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0));}

  • why don't you go for a mobile-first approach because that's what most of the people at frontend mentor are recommending. I have also received a lot of comments telling me to go for the mobile first approach.
  • another thing is they don't recommend setting font-sizes in px you should either use rem/em for further information on this you can go through Why font-size must NEVER be in pixels - FED Mentor

  Marked as helpful

  0

  

  Tri D Nguyen•20

  @tdnguyen04Posted 10 months ago

  @tenze21 Omg. Your comment is gold to me. I have not heard about such things. I appreciate it, Tenzin!

  0

  

  Tenzin Choeda•210

  @tenze21Posted 10 months ago

  @tdnguyen04 No worries, I am also just a newbie ✌️

  0