Skip to content
Submitted over 2 years ago

Stats preview card component using CSS

Fadi•100
@Fadi-ibrahem
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Hamzat Lawal•560
    @EngineerHamzieyPosted over 2 years ago

    Hi @Fadi-ibrahem, you have done a great job. To solve the accessibility issue:

    • always add the lang attribute to your <html> tag, i.e you should have something like <html lang="en"> . en here means english.

    • <section class="container"> Using a section here is not advisable because document should have one main landmark. it should be <main class="container"> . other landmarks are <header>, <footer> etc. but in this site the only thing needed is the main and the footer.

    • this attribution should be contained inside footer

    <footer>
<div class="attribution">
</div>
</footer>

    I also noticed the desktop version isn't centered, to center it, add this to the body.

    body {
 /* 
 inorder to center the page vertically and horizontally,
you should use flexbox. For that you will need to add min-height 100vh to the body to ensure that it's center vertically on all devices
min-height is the best option so that will grow bigger when needed(i.e responsive). min-height NOT HEIGHT, using ordinary height, won't 
allow responsiveness
  */
  min-height: 100vh;
  /* then we can now center it with flexbox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    and if you don't mind, there are more explanation here on how I did mine after been corrected by mine dearest mentors.

    I hope you found this helpful 😊

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord