Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Using CSS Flexbox and HTML

@darwinsanchez9018

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi bros. This is my first attempt at this project. In the process I learned flexbox, mediaquerys, I started the desktop version, and then the mobile version. Now I understand that the mobile version should be made first. Any feedback would be greatly appreciated!

Community feedback

@rngueco

Posted

Hi Darwin!

Good job on the layout 👍

One thing to note is that usually all relevant elements should fit the width of the screen, so you might want to make your main container respond to the width of the viewport (like setting a min-width, width, or max-width) so that users don't have to scroll to the right to see the whole card.

You can also adjust the breakpoints of your design as you see fit: for example, your mobile design may come in at an earlier point (to cover screens for smaller tablets).

I hope that helps. Happy coding! 🎉

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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