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

Sass, Flexbox and basic HTML

@mackans95

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! This is the first time i publish any of the things i've created, so any constructive critisism is very welcome! I had a lot of fun trying to make this challenge, and hope the rest go as smoothly!

Community feedback

@tsanev96

Posted

Good one. You can use object-fit: cover on the image and it wont be that stretched. Also im not sure if u need the css styles (margin-top:auto, column-gap), there are a few more that doesnt change anything.

1

@mackans95

Posted

@tsanev96 ah, i remember object-cover from somewhere, ill try it out! And as far as the styles go there might possibly be some that dont do anything left, but the ones you mentioned do have an effect. Margin-top: auto on that element is to push down the stats div to the end of the flex-container, putting margin auto on that tells it to align itself to the end of the container and add on the whitespace in between as margin, which also makes it more responsive. The column-gap is mostly for making sure the individual stats dont get to mushed together when you decrease the size of the page, although im sure it could be solved differently :)

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