Skip to content
Submitted almost 2 years ago

Stats Preview Card Solution + HTML + CSS + FlexBox + CSS GRID

accessibility
P
Kamania•170
@Kamania
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello there! Check out my work and provide any feedback on areas I can improve on. Thank you

Code

Please log in to post a comment

Log in

Community feedback

  • Zubair Abid•280
    @ZubairAbid101

    Hello!!! 👋

    Congratulations on completing the challenge! 🎉

    There are some things that you can improve in the code,

    • I noticed that you used the same styling for the <html> and the <body> element in your CSS file. I advise removing the <html> tag from your styling as this will not change the appearance of the design.
    • Try using the prescribed image given for each viewport. A simple way to do this is to create two <img> elements, one for the desktop and other for the mobile design. Set the display: none for the mobile design as default. Then using media queries set it to display: block for the mobile design at the appropriate size.
    • Instead of creating a single media query, try making separate media queries inside each individual element in your CSS file.
    • Try using min-height: 100vh on the <body> element. This will give you more control over how the document behaves provided the height gets larger than 100vh

    I hope you find this comment helpful! 🙂

    Did you know that there's a mark as helpful and an up-vote option? 🤔

    There's even a Follow button!!! 😁

    Happy Coding!!! 💻

    Marked as helpful

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