Reponsive Stats Preview Card Component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The statistics at the bottom are a list, so it should be built using an unordered List element.

  More Info:📚

  MDN <ul>: The Unordered List element

  • The images serve no other purpose than to be decorative; It adds no value. The alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • This challenges requires the use of two images 🎑 for different breakpoints. The picture element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:📚

  https://www.w3schools.com/html/html_images_picture.asp

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎄🎁

  Marked as helpful

  1

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  • Your CSS Reset is being underutilized. To fully maximize it, you will want to add more to it.

  Here are some examples that you can freely use:

  Josh Comeau Reset

  Eric Meyer Reset

  • Implement a Mobile First approach 📱 > 🖥 Mobile devices are now the dominant 👑way in which people browse the web, it is critical that your website/content looks presentable on all mobile devices.

  More Info: 📚

  Mobile First

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using these unit gives users the ability to scale elements up and down, relative to a set value.

  1

  

  Devesh shukla•280

  @deveshshuklaPosted almost 2 years ago

  @vcarames Thanx buddy for your feedback... I will definitely go through it. 👍

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @deveshshukla

  Glad I could help!☃️

  Keep it up!

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  There is no for position: relative .imgContainer, give .imgContainer a background-color. give the img a width 100% height:100%, object-fit: cover, mix-blend-mode: multiply; and opacity of 0.8 .

  .card-img{
  background-color: hsl();
  }
  img{
  width:100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  1

  ---

  

  Devesh shukla•280

  @deveshshuklaPosted almost 2 years ago

  Hey hi, @Hassiai actually i used position: relative for making mobile responsive... Actully in this we have to transfer image from bottom to top view that's why I used that... Anyway thanx for suggestions. 🤗

  0