Responsive stats preview card using CSS Flex

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamartPosted over 3 years ago

  Hey, awesome work on this one. Layout in desktop looks good, though it is smaller, the mobile layout looks fine but some sections have big white-spaces and like what Fluffy Kas said, a bug occurs.

  Some suggestions would be:

  • Always have a main element that will wrap the main content of the page. The .container selector could use main element instead of div.
  • Avoid using height: 100vh on a large container like the .container selector. This makes the element's height only limited to the remaining viewport/screen's height. Remove this or replace it with min-height: 100vh.
  • Always have an h1 on a webpage. The h2 text on the left side could be the h1.
  • The .stat selector could have used ul element, since those are "list" of information about the user, or an dl element.
  • The text like 10k 314 shouldn't be heading element, since it doesn't really add any extra information if it were a heading tag like this one. Just use p tag on it.

  Aside from those, just the bug when resizing. Still, great job on this one.

  Marked as helpful

  1
• 

  Fluffy Kas•7,675

  @FluffyKasPosted over 3 years ago

  Hey, your solution looks pretty fine but do check it around 700-800px! I believe a reason it looks a bit funny because you have a fixed height of 100vh on the container.

  Marked as helpful

  1

  ---

  

  SREEHARI P V•280

  @sreehariv-codePosted over 2 years ago

  @FluffyKas Thanks for reporting the bug. I have resubmitted with a fix. I hope it works well. If there is anything needed to be improved in the code, looking forward to make the changes to the same

  0

  

  SREEHARI P V•280

  @sreehariv-codePosted over 2 years ago

  @FluffyKas Thanks for reporting the bug. I have resubmitted with a fix. I hope it works well. If there is anything needed to be improved in the code, looking forward to make the changes to the same

  0

  

  SREEHARI P V•280

  @sreehariv-codePosted over 2 years ago

  @FluffyKas Thanks for reporting the bug. I have resubmitted with a fix. I hope it works well. If there is anything needed to be improved in the code, looking forward to make the changes to the same

  0
• 

  SREEHARI P V•280

  @sreehariv-codePosted over 3 years ago

  Thank you for the suggestions. Looking forward to make the changes and to hear another set of suggestions. I have just only started using frontendmentor. I think it will help me to learn from my mistakes to improve the knowledge.

  0