Skip to content
Submitted over 3 years ago

Use of FlexBox

Kainã Mazim•115
@KaMazim
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 had difficulties sizing the image and choosing responsive break points. Any tip related to that would be useful.

Community feedback

  • Shahin NJ•1,190
    @SJ-NosratPosted over 3 years ago

    Hi Kaina, Your solution looks good!

    The reason why you were maybe having difficulties with the break points, is maybe you've designed for the desktop version than tried to scale down to mobile screens. Try the following code your solution first for mobile then add @media (min-width: 768px) etc for larger and larger screen sizes. It's also fine to add multiple @media queries to achieve the desired responsiveness for multiple veiwport sizes.

    I learnt learnt the mobile first approach from Kevin Powell's video.

    Hope the above helps!

    Best of luck with your coding journey!

    Marked as helpful
    0
  • Kainã Mazim•115
    @KaMazimPosted over 3 years ago

    Thank you. I was trying to use the lesser quantity of @media queries I could.

    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