Responsive Stats preview card component using CSS Grid/Flex
Design comparison
Solution retrospective
This project was very fun, although the hardest part for this challenge was the purple overlay. After some research and asking around in the Slack community, I decided to go with 'mix-blend-mode' on a pseudo element. It worked perfectly although I did have trouble with the background-color on my pseudo element constantly wanting to go past the image's width, I found putting a 'min-width: 100%' on the image stopped that from happening but I would like any suggestions on how I could have done it better as I feel it felt like a band-aid solution.
Overall feedback and/or suggestions of code changes would be greatly appreciated for me to take into my next projects. :)
Community feedback
- @visualdennissPosted over 1 year ago
Great work! your solution looks pretty good overall.
I'd like to suggest making use of flexibility/responsiveness of the flexbox a bit more, as to me, it looks like the jump from desktop to mobile layout is a bit too early. It display a mobile sized container while it is still 1100px wide, even wider than tablet layout. So might add bit of padding or margin to the sides and let it squeeze a bit when browser size is getting smaller and then when it starts to break the stats card really, you can switch to mobile.
Hope you find this feedback helpful!
Marked as helpful0@TanDevvPosted over 1 year ago@visualdenniss Hiya, Dennis. Thanks for your suggestions.
Looking back at my code for this project I agree that I set the break-point a bit too high for this one, I will take your advice into my next project for sure. I am happy to hear you liked my solution! :)
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