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

Stats preview card component challenge hub

@AmazingCukr

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


Hi all,

this is my 1st attempt for this challange. I tried to make it little bit responsive but it doesnt exactly match the original image tho. Also I dont know how to change color for that picture. All criticism/help is much welcome :)

Community feedback

Mike Hayden 1,005

@mickyginger

Posted

Hey David,

This looks great on desktop, but as you alluded to above the mobile layout is a little off.

You've added a couple of empty divs, presumably for layout purposes? We shouldn't really be adding unnecessary markup, padding and margin (or gap in the case of grid) should be sufficient.

You're using grid which is great, but perhaps flexbox would be a better idea here. If you aim to do the mobile layout first you can set flex-direction: column so that the image sits above the content, then change to flex-direction: row-reverse on desktop so that the image sits to the right of the content.

Here's a really useful guide to flexbox from CSS-Tricks, hopefully you'll find it helpful 😀

0

@AmazingCukr

Posted

@mickyginger I've added emty difs for grid purposes to make space between. Im learning html&css tops 3 weeks. There is definitely better way how to make but this was the one, that i could think of. So every help is much appreciated :)

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