Stats Preview Card || Mobile Frist || Css Grid & Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Ernest! 👋

  Great work on this challenge! Your solution looks pretty good! 😀

  There are some areas that you could do to improve this solution,

  • I would recommend increasing the breakpoint of the media query because it's too early to make the layout into two columns. On mobile landscape 360px * 640px, the layout becomes the two columns layout or the desktop layout.
  • In your CSS, I noticed this selector section article.stat-number h2 which would be much be as stat-number-heading . I would recommend only nesting when you want to style pseudo-elements, pseudo-classes (:hover, :focus, etc) and @media queries. It's a good practice to keep the CSS specificity as low and flat as possible. High specificity will make your stylesheet hard to maintain.
  • In addition to the previous point, the stat number should not be a heading, it should be a paragraph because the content below it is too small. You might find it helpful if you think of a heading as a title in the document.
  • I would recommend making the stats as a ul instead of a section and wrapping each stats item with li. Using section and article too much might cause a lot of noise for users of the screen reader.

  I hope this helps! Keep up the good work! 👍

  Marked as helpful

  0

  ---

  

  Ernest Push Gbaboh•460

  @gbabohernestPosted over 2 years ago

  @vanzasetia thanks for so much for the feedbacks. I wil do my best to keep things simple in my code. Thanks a lot. 👍

  1
• Account deleted

  Hi there,

  • remove the margin from the article and add to the body place-items:center; min-height:100vh;

  • check the HTML report to fix accessibility issues

  hope this is helpful

  Marked as helpful

  0

  ---

  

  Ernest Push Gbaboh•460

  @gbabohernestPosted over 2 years ago

  @Old1337 thank you. it was helpful. 👍

  1