Skip to content
Submitted over 3 years ago

Mobile first design using Flexbox

Fahim Mahmud•165
@FahimMahmudJoy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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
    @Jos02378Posted over 3 years ago

    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

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