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

flexbox and media queries

Emad Jaber 130

@emad2411

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


Hello Everyone, I really need your comments and advice.

Community feedback

@MojtabaMosavi

Posted

Hi!, looks nice and responds well. A small improvement that you can make is to make the fonts a litle bigger on desktop view because is increases the readability.

Keep coding :)

Marked as helpful

0

Emad Jaber 130

@emad2411

Posted

@MojtabaMosavi Thanks for your comment

0

@chysomm62

Posted

Great work. Try putting your card in a wrapper and using display flex, just changing flex-direction in mobile or desktop.

0
T
Grace 29,310

@grace-snow

Posted

I'm afraid this is all unreadable for me because it's so small

Good html structure though ☺

0

Emad Jaber 130

@emad2411

Posted

@grace-snow Thanks Grace

0

@rohits673

Posted

Hi, I checked your site its looks accurate on desktop version, still you can improve it for medium sized devices and mobile as on both of it looks really small due to too much space around also you should avoid fixed width of .card components also as you are using flexbox you can use it in .container to centralize your card instead of using transform:translate(-50%,-50%); you can use responsive unit like vh for deciding height for the .card divs. For more clarification please check my solution an please let me know if there is any improvement i can do there. Thanks!

0

Emad Jaber 130

@emad2411

Posted

@rohits673 Thank you Rohit , I'll check you solution and let you know if I have any Question

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