Responsive Result Summary Card Using HTML & CSS

Community feedback

• 

  P

  Dmitry Papka•30

  @doojinPosted about 1 year ago

  I would like to leave some feedback if I may.

  • The score circle in your solution is not really the circle. Since you defined it's width = 45% and height = 35%, the container is not square. Therefore border-radius of 50% is not resulting into a circle. One possible solution would be to define fixed width and height for it (in pixels) making width = to height.

  • The tags that you're using in your markup. I would suggest to read more about heading tags, how to use them and what's the difference between h1, h2, h3 (etc.) tags. Also I'm recommending to read any article about semantic tags. It's a simple topic and should not take too much time.

  • The width/height of your container element. You set them to 50vw and 50vh respectively. Since the width/height are fixed, the problems appear when you change the size of the browser window to the the small and content does not fit within your container anymore. Actually, simply removing width/height properties from the container element fixes this problem. In my solution I don't have height property set (it's dynamic based on container's content) and I have a static width value set in pixels.

  Marked as helpful

  0

  ---

  

  Damini Rajput•120

  @GitDbRPosted about 1 year ago

  @doojin Thank You for your feedback. I will definitely work on the things you have mentioned.

  0