Frontend Mentor | Stats Preview Card Component coding challenge solution

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

@ivangeier

Posted almost 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

Brendan• 170

@brendanmadden

Posted almost 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!

Ivan Geier• 100

@ivangeier

Posted almost 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 ;)

Brendan• 170

@brendanmadden

Posted almost 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!

Stats Preview Card Component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community