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

Mobile first design using Flexbox

@FahimMahmudJoy

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 tried mobile first approach for the first time and changed the markup a little bit from the previous one. I suppose the stats look better now. Any thoughts?

Community feedback

Joseph 770

@Jos02378

Posted

Hey Fahim, great job on creating this solution!

First of all, you did a great job on making it responsive, it is working perfectly and I don't see any overflow/side-scrolling on the mobile version. For aligning your content, I think it is better to use flexbox with the property 'justify-content' and 'align-items' rather than explicitly setting the padding and margin for mobile and desktop size because it can save you a lot of time. Also, you can use 2 overlays for the image and play with the opacity to get the same color as the design.

I hope this helps, good luck!

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