Results-Summary-Component using HTML and CSS

Community feedback

• 

  finitehorizons•80

  @finitehorizonsPosted about 1 year ago

  -So, instead of making a specific class for each summary row and then magic numbering them in line, you should put them all inside a flex container(or grid) and then use gap to move them around the page. To adjust the individual styles of each score, you can add a second class for each for the colors specifically.

  -Flex or grid solves this problem

  -The middle of the page problem is solved by setting a min-height to the page(or body) of 100vh and then using margin to center or using flex/grid to align/justify the container to the center of the screen

  -This requires media queries. You set a max or min limit to screen width and then adjust styles accordingly based on that size. Example: @media screen and (max-width: 600px) { ...styles go here}

  That would apply styles only when the screen size is less than 600px. Hope this helps :)

  Marked as helpful

  0