Frontend Mentor - Stats preview card component solution

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi Naresh! Well done on this solution, it looks good! Here's a few things I noticed that could help you:

  • I think it would be a good idea to set a max width to your card in desktop layout - on my screen it stretches just a bit too wide, you lose a bit of the image as well. It may also be good to move your breakpoint a bit - at 1024px there really isn't enough space for the card to be horizontal yet, and some tablets are quite a bit smaller than that. (you can view what the design look on different viewports in the browser)

  • In mobile layout, the class .container-1 has grid columns and rows but not display: grid - so they're not really doing anything :)

  • Also in mobile layout, it would be good to add just a bit of padding-top of card-text div.

  • Instead of using margin to position the card on the screen in desktop design, you can set body's min-height to 100vh and use grid or flexbox to center the element within it :)

  • There is a CSS property background-blend-mode you could've also used to blend the image with a background-color instead of adding an overlay (although that's not a bad option either)

  • Make sure that the link to your site in the attribution is correct.

  Overall though the result looks really good, I just thought I'd mention some things that could make things a bit easier for you in your next challenges :) happy coding!

  0

  ---

  

  Naresh•90

  @nareshpooniaPosted over 3 years ago

  Hi Agata,

  Thank you so much for taking out time to review my solution.

  I've taken note of all of your suggestions.

  I have noticed that my solution, doesn't match exactly with the design.

  I'm going to work further on the solution & resubmit if it's possible.

  0