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

Use of FlexBox

KainĂ£ Mazim• 115

@KaMazim

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 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-Nosrat

Posted

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

@KaMazim

Posted

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
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