Stats preview card component using flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi Taskin Sultana, congrats on completing this challenge!

  You did a good work putting everything together in this challenge, something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

  ✌️ I hope this helps you and happy coding!

  0
• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi Taskin,

  Congratulations 🎉 for completing this challenge, your Stats component looks great, and it is great that you used flex to center the card. Also, it is great that you used the right semantic for your code. I have some suggestions.

  1. To prevent the card from touching the side of the screen, particularly when adjusting screen sizes, you can give the body tag, a margin property e.g. margin: 0 10px;
  2. Also, I realised that you took a desktop-first approach since you used the max-width within your media query. I would strongly suggest you use the mobile-first approach as it will be easier for responsiveness and rearranging/changing the elements as you increase the screen size. It is also best practice to use this approach.

  Overall, great work and wish you the best for your future projects so keep coding 👍.

  0