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

Responsive solution with breakpoints, SASS and CSS Flexbox

@JonathanCazzaro

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


I'm pretty happy with how it looks, but I'm wondering if my responsive breakpoints are consistent enough... Let me know if you have any suggestions/advices ;-) thank you all

Community feedback

T
Matt Studdert 13,611

@mattstuddert

Posted

Hey Jonathan! You should definitely be happy with how it looks. You've done a great job of replicating the design! 👍

The responsive side of it looks good. You could potentially put the 3 stats into a row sooner, as they stay in a single column a little bit too long in my opinion. That's me being picky, though! 😅

I'd also recommend simplifying your media queries. By missing max-height, min-width, max-width, and orientation you risk overcomplicating things and making extra work for yourself. For the vast majority of responsive stuff, I'll just use min-width. I'll occasionally use others, but only in very specific circumstances.

I hope that helps. Keep up the great work!

0

@JonathanCazzaro

Posted

Hey Matt thanks a lot for your feedback ! You're not being picky (I could probably win a award for that :-o) and I was thinking of doing that and just forgot. Thanks for your recommendations about media queries, I'll try to apply them for my next challenge !!

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