Results summary component

Community feedback

• 

  Anurag Singh•250

  @dev-anurag-singhPosted about 1 year ago

  Hey, Rohit I have gone through your code and here are some suggestions I have that can be easily incorporated into your code

  .main-container {
   // remove height and width and instead use flex property and rem instead of px(1rem=16px)
   flex: 0 0 43.75rem,
  }
  
  .left-side{
   // remove width and add flex
    flex: 0 0 50%,
  }
  
  .right-side{
   // add align items property
   align-items : center,
  }
  

  Marked as helpful

  0

  ---

  

  Rohit Rajak•60

  @RoRajakPosted about 1 year ago

  @dev-anurag-singh

  Thanks for suggesting. I noted

  0
• 

  Fran Extremera•210

  @franexmo81Posted about 1 year ago

  Hi RoRajak and congratulations on submitting this solution.

  Don't be so hard with yourself ("I made lots of mistake") 😊.

  The layout looks quite well and accurate on desktop view. However, it looks like you struggled a bit with the mobile one. I'm sure that if you keep trying, you'll be able to improve. It's all part of the process.

  Here are some other easy fixes that would help:

  I've noticed that the intended font is not working.

  Instead of linking from the TTF file: @import url(/results-summary-component-main/assets/fonts/HankenGrotesk-VariableFont_wght.ttf)

  Try better with importing from Google Fonts: @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap')

  Also, it looks like the images are not loading properly.

  Try to replace the way you've linked: src="/assets/images/icon-reaction.svg"

  With this way: src="assets/images/icon-reaction.svg"

  I hope all this helps. Good luck and keep going!

  Marked as helpful

  0

  ---

  

  Rohit Rajak•60

  @RoRajakPosted about 1 year ago

  @franexmo81 Thank you. I will do that

  1
• 

  Mika•230

  @mikatechsPosted about 1 year ago

  Congratulations on finishing up this project. As I have seen your code, I can give a small recommendations that might help you consider few things.

  1. Avoid using height and width with straight sizes, since with that you are limiting the responsiveness of the elements. Instead try using max-width and min-height.
  2. You should always use relative units like %, EM, and REM are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element's size.

  Good luck and happy coding.

  Marked as helpful

  0

  ---

  

  Rohit Rajak•60

  @RoRajakPosted about 1 year ago

  Thank you i will remember to use relative unit @mikatechs

  0