Skip to content
Submitted over 3 years ago

Mobile-first responsive design for a stats preview card component.

William Alonso•50
@William-Alonso
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 is my design for this challenge, made with a mobile-first approach.

To achieve the purple filter effect on the grayscale pictures, I used an empty <div> with the picture in its background, and within the div another empty one with colored background and opacity.

I distributed all the elements with CSS grid. I used flexbox only to center the card in the viewport.

I'll be glad to receive any suggestions for improvement!!

Community feedback

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

    👋 Hi William! My name is Vanza!

    🎉 Good job on finishing this challenge! This challenge is one of the tough challenge (at least for me😂). I have some feedback that may help you improve this solution.

    1. Your attribution looks annoying 🤔 on mobile view (It was right on the top of purple card) since it set to be positon: absolute so my recommendation is to set it to position: relative
    2. For the .box that contains .card, on mobile view, I think it should be text-align: center since that's how it is on the mobile design.
    3. (This one is just personal preference) I think you can replace the <b> tag with <h3>, because from what I know <b> tag has been deprecated. to learn more you can read this.

    And that's it! Hopefully those feedbacks are useful!

    Happy Coding!

    1
    William Alonso•50
    @William-AlonsoPosted over 3 years ago

    Hey, pal! Nice to meet you! Thanks for your feedback! You're right on all three points. Tomorrow morning I'll stir me into action!!

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    Looks good but try making your mobile to desktop transition point about 800px and not as low as you currently have it

    0
    William Alonso•50
    @William-AlonsoPosted over 3 years ago

    @palgramming Thanks dude!!! I thought to do it, but then I forgot to change the min-width...

    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