Summary Score Component

Community feedback

• 

  ohuttar•160

  @ohuttarPosted over 1 year ago

  Hello Anja, I hope I can give some helpful feedback.

  I think the main issues you're experiencing come from using width/height on many of your elements, as well as setting width/height with percentages. You end up with overlapping/warping content because your sections are trying to conform to your percentages.

  It's counter-intuitive but you don't need to set width and height that much (especially height). The height of an element tends to automatically adjust to its inner content. And the width will adjust to its parent.

  In my opinion the main thing that needs a width and height set is the big circle that contains the total score. Beyond that, you may just need a simple max-width for the card container so that it doesn't grow too large. I believe this will help your solution behave more predictably and simply, as well as making it easier to make finer adjustments.

  I hope this helps, and nice job with your solution! BTW your CSS is very well-organized and easy to read.

  Marked as helpful

  1

  ---

  

  Anja•20

  @anjafritzschePosted over 1 year ago

  Hello @ohuttar this is very helpful, thank you for going in this detailed. I adjusted your recommendations and cleared my css up a bit. As Newbie I appreciate every help and feedback to write more cleaner codes.

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing your first challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • You are using px and rem both concurrently for setting font-size

  ---

  • Instead of using pixels px in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Read more 📚.

  ---

  • And, use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

  ---

  • So change,

  body {
      height: 100vh;
  }
  

  ---

  • Instead try this

  ---

  body {
      min-height: 100vh;
  }
  

  I hope you find it helpful ! 😄 Above all, the solution you submitted is great

  Happy coding!

  Marked as helpful

  0

  ---

  

  Anja•20

  @anjafritzschePosted over 1 year ago

  Hello @0xAbdulKhalid, I really like your solution. Thank you for going in this deep. Will try it tomorrow and fix this. Using rem is new for me. Do you recommend to set a general font size in body, so I can use rem from a set size? (I hope I got this right) Thank you a lot Abdul. Your feedback is very helpful. :)

  0
• 

  Anja•20

  @anjafritzschePosted over 1 year ago

  Update: I fixed everything and cleared the media query. Thanks for your help. Have a nice Sunday.

  0