Skip to content
Submitted over 1 year ago

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

Kamania•170
@Kamania
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

Solution retrospective

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

Community feedback

  • Zubair Abid•280
    @ZubairAbid101Posted over 1 year ago

    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
    1
    Kamania•170
    @KamaniaPosted over 1 year ago

    Thank you @ZubairAbid101. Let me make the changes you have suggested

    0
    バレンタイン 😈•64,170
    @VCaramesPosted over 1 year ago

    Hey @ZubairAbid101, I suggest re-reading the sites guidelines as asking users the following "If you find this comment helpful do mark this as helpful and up-vote it..." is against the sites guidelines and can cause your account to get suspense/banned.

    0
    Zubair Abid•280
    @ZubairAbid101Posted over 1 year ago

    @vcarames I understand your concern and will change my comments accordingly, though I would like to point out that the guidelines don't explicitly restrict the use of such phrases. It merely advises against such an action. Regardless, thank you for pointing that out.

    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