Stats Preview Card

Community feedback

• 

  teamie•470

  @tea-scriptsPosted over 2 years ago

  Great work completing the challenge. Some help:

  • You can set the display property for the image to block and also object-fit to cover. This would make your image fill up the entire space dedicated for it also don't forget to take off/add the border-radius where necessary.
  • Having a max-width property on your card/container would help you maintain the perfect size you want and puts you in control of the maximum width you want that card/container to have.
  • You should consider using CSS Grid or Flexbox for your .content div to have a more aligned display. To learn more about CSS Grid and Flexbox
  • If you look at the color of "insight" it is similar to the overlay you want to achieve on the image and you can use the linear-gradient as an alternative approach and just play around with the opacity.
  • For the accessibility issue, you can replace your h3 with h2 in your stats. Just like the warning states, heading levels should be incremental.

  You've done a great job so far, happy coding 👍!

  1

  ---

  

  Chey•70

  @cheytesPosted over 2 years ago

  @coder-teamie Thank you so much for the advice!

  1
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey Chey!! Cheers 🥂 on completing this challenge.. . Here are my suggestions

  1. Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
  2. There is an issue with your image regarding your border-radius.. You can fix that by using the shorthand values and setting some sides to 0. You can read more on border-radius to understand
  3. Nesting an img directly in a div might be stressful cause of the default margin on divs.. You can remove unnecessary divs and set images to block with object-fit to cover.

  . Regardless you did amazing.. Happy coding!!!

  0