Submitted over 2 years ago

Stats preview card component using mobile-first approach

mycrochip• 460

@mycrochip

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Overall, I just learned more because I faced more and more problems as I move on to more demanding projects. What surprised the most was that certain code snippets that proved very useful in my other projects just seemed impossible to apply to this project. There must be some lapses in their use cases. This could be a result of the display types I used and some other conflicting variables; however, adding them here would just be too tiresome.

Community feedback

Madan Sinha• 300

@lazy4gyan

Posted over 2 years ago

Hi @mycrochip, I have checked your site you have done a good work only I want to highlight that your image is not showing 100% in mobile view and when I tried to change the media query of section 2 it is affecting the desktop design not sure what is happening.

If you have answer please let me know.

Marked as helpful

mycrochip• 460

@mycrochip

Posted over 2 years ago

@lazy4gyan To be honest I really have a struggle with images. I'll need to inspect them the more in future projects

Shashree Samuel• 9,260

@shashreesamuel

Posted over 2 years ago

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think the overlay on the image is supposed to be a bit lighter.

I hope this helps

Cheers Happy coding 👍

mycrochip• 460

@mycrochip

Posted over 2 years ago

@TheCoderGuru

Thank you for your review. I noticed that as well but I saw that most solutions here follow this pattern as well, so I opted to leave it at that. Moreover, I had serious issues with mixing the background color with the image's own at first using 'mix-blend-mode,' in which case adding any other layer over the image will spoil the broth.

Please log in to post a comment

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