Skip to content
Submitted over 3 years ago

Stats Preview Card Component

Brendan•170
@brendanmadden
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

Hi there! This is my first project, and I definitely have a lot of questions, and I would love any feedback! My main question though, is what am I doing incorrectly with the mobile responsive version?

Maybe I should have attempted the challenge from a mobile first approach, but I feel like there is something with flexbox that I'm missing, and my HTML structure. Is there a simple solution? Any suggestions for improvement? Thank you so much!

Community feedback

  • Ivan Geier•100
    @ivangeierPosted over 3 years ago

    Hi, Brendan.

    To fix your mobile responsive version you need to check the width from .left-content and .right-mask classes. They are set at 50% to all sizes of screen, maybe you can set bigger width (80-90%) for smaller screens ;)

    Nice job!

    Marked as helpful
    0
    Brendan•170
    @brendanmaddenPosted over 3 years ago

    @ivangeier Awesome! Thanks a lot for the feedback, Ivan! Makes total sense, I'll give that a shot!

    Your solution looks great too! I just checked it out. I think you might be able to figure out the color issue by looking at what I did with the masks. It's maybe the "mix-blend-mode: multiply;" that you're missing?

    Thanks again!

    0
    Ivan Geier•100
    @ivangeierPosted over 3 years ago

    @brendanmadden, thank you for your help! "mix-blend-mode: multiply;" worked really great. Looks much better now! I didn't know about it.

    Thanks a lot ;)

    0
    Brendan•170
    @brendanmaddenPosted over 3 years ago

    @ivangeier Amazing, Ivan! Glad to hear it! Haha it's one of those things that is fairly simple, but REALLY cool! Glad it worked for you.

    Good luck with the next project!

    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