Skip to content
Submitted over 2 years ago

Responsive stats card using CSS Flexbox and media query

Sarah Arvin•80
@Sarah-C-Arvin
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

This was a fun learning experience! I hadn't ever used pseudo elements before, which is what I ended up using for the violet overlay on the image. It has also been some time since I've worked with media queries for responsive pages, so it was good to refresh my memory. On my media query for the desktop design, I know using padding on the headings and paragraphs probably isn't the best way to go about aligning things, but I had some trouble getting flexbox properties to do what I wanted in that area. I would love any feedback, and if anyone has any ideas on what I can do better/easier, I'd love to hear it!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Greetings, Sarah! 👋

    Good effort on this challenge! 👍 It's great that you were having fun and learning something new! 😄

    I would recommend moving all the styling into a separate CSS file to keep everything organized. It's a good practice to keep HTML, CSS, and JavaScript separate. That way, it's easier to maintain, especially on a bigger project.

    To make the card perfectly in the middle of the page, the only thing that you need to add is the min-height: 100vh; to the body element. It's recommended to use min-height to allow the element to grow if needed.

    Also, you need to install a code formatter in your code editor to make your code easy to understand and read. Currently, since the code is not indented properly, it's hard to know which element is the parent element and the child element.

    I hope this information is useful! Happy coding! 😁

    Marked as helpful
    0
    Sarah Arvin•80
    @Sarah-C-ArvinPosted over 2 years ago

    @vanzasetia Ah, got it! Thank you! That's all very helpful :)

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @Sarah-C-Arvin You're welcome! Glad you found it to be very 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