Stats preview card component Using CSS Grid

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Add the alt attribute alt=" " to the img tag to fix the error issue. The value of the alt attribute is the description of the image.

  For the color of the image, give .image-column a background-color of soft violet and add mix-blend-mode: multiply; opacity: 0.8 to the img.

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

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Shahzaman Abbasi•170

  @Shazee17Posted almost 2 years ago

  @Hassiai Idk why I always forget the alt tag, also I didn't know about that blend mode, thanks for that. I appreciate the feedback :D

  0
• 

  Villo•190

  @VilloKodeHodePosted almost 2 years ago

  https://www.w3schools.com/css/css_rwd_intro.asp

  W3 schools is a very good source to learn just everything about css and html.

  Your solution doesn't seem that far of though. Good work! The mobile design just needs to be generally smaller, thats it.

  1

  ---

  

  Shahzaman Abbasi•170

  @Shazee17Posted almost 2 years ago

  @VilloKodeHode Thank you!

  0