Skip to content
Submitted over 2 years ago

Mobile first stats preview card using flexbox & media query

why-not-phoenix•90
@why-not-phoenix
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

Hey guys,

Here's my solution for the stats preview card.

  1. Would've felt better making the side image a background-image but couldn't figure out the right blend with the background-color. I'd appreciate tips on how to mix images and colors.
  2. Main might look terrible on some devices, I tried fixing that, what do y'all think I could've done better?
  3. Wasted a lot of time trying to get the right dimensions. Is there an easier way of getting dimensions that fit?

My code might be messy, I'd appreciate any tip on optimization and better arrangement. Generally, I just need an assessment on these guys. Thanks for taking the time to help.

Community feedback

  • Faruk Abdulganiyu•380
    @farukingPosted over 2 years ago

    Nice job. What I can add is that you change the width of the card(line 27 css) to 90% to get it closer to the design.

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

    Hi again! 👋

    Good job on this challenge! 👏 It looks similar to the design (judging from the design comparison).

    Regarding your questions.

    • You have done a great job with the image overlay. So, from me, there's nothing to fix since it already looks the exact same as the design. Great job! 👍
    • Don't change the html font size.
      • It makes the card looks small on mobile view.
      • It can cause huge accessibility implications for those users with different font sizes or zoom requirements.
      • If you are using a CSS framework, it can cause a lot of problems. All the sizes would be changed.
    • I recommend keeping it simple. So, the initial styling is a one-column layout and then uses media query to make the card has two columns. Currently, making the card as two columns on 1350px width is a little too late. Also, there's no need for max-height.

    For the m styling, you can make the "m" for "12m+" be uppercased on the HTML. It's just a single letter so I don't think it would cause any issues even if the screenreaders pronounce it as the letter "m".

    The statistic number should not be a heading. Just, use strong or use span and then make it bold with CSS.

    Hope this helps.

    1

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