@finitehorizons
Posted
-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
