Result summary component Beginner

Community feedback

• 

  Bernardus•1,095

  @BernardusPHPosted over 1 year ago

  Hey THANKUXARI

  I see that you have a wrapper class on the div inside your main and using it as the entire summary card container and also playing with the height and width incorrectly here.

  I would rather make the main my container and use 2 sections for left/top and right/bottom of the summary card.

  For the height and width part, first I would use the body and add a min-height:100vh so that we have a height on the body. Also it can be better to use the flex on the body and then just use flex-direction:column so that the main and footer are vertical aligned from eachother.

  Then the important part is to use a clamp which is amazing when using it for resizing on smaller screens. I will use it on the width of the main(which is now the summary card here) to size the card however I want because I see that resizing the site breaks the summary card a little.

  clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

  Hope this helps. Ask if I need to explain better.

  Marked as helpful

  2

  ---

  

  thankuxari•110

  @thankuxariPosted over 1 year ago

  @BernardusPH

  Thank you for the reply!!

  I will take your feedback and use it to improve my skills and make my code better.

  1