Stats Preview Card Solution

Community feedback

• 

  jason12119•140

  @jason12119Posted about 3 years ago

  I see two things you could improve on. First is the headline, which has much smaller font size than the preview. If you struggle with choosing proper font sizes, study how to use EM units, as they help quite a lot.

  Another thing I see is that the padding on the left half of the card is kinda off (bottom is very big compared to the rest). If you want to have the last element (which here are the statistics) at the bottom, you can use absolute positioning (I don't recommend) or flex positioning (I highly recommend).

  Keep coding and enjoy :)

  Marked as helpful

  1

  ---

  

  Nabil-Y•150

  @Nabil-YPosted about 3 years ago

  Hi @jason12119,

  Thank you for your feedback, I'll look into it and update the solution.

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great though it is pushed down and the height of the container seems larger than the design. It is responsive though and the mobile layout looks great.

  jason12119 already gave great feedback on this one, just going to add some suggestions as well:

  • Since you are using flexbox, you can remove the margin on the main since using it as positioning the layout is not consistent enough, but remember to add a max-width on the main to have its size define. Then on the body tag just add justify-content: center to center the layout vertically.
  • Your .stats could have used ul since those are "list" of information about the company website and using aside on it is not suited.
  • Also, inside in those list information, those text should not be using a heading tag because they don't really give content on what the section would contain right, so better using p tag on them.

  Aside from those, the site looks great.

  1