stats-preview-card

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  wrap <div class="attribution"> in a footer tag to fix the accessibility issues.

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded

  For the color of the image, give .main-image-container a background-color of soft violet and give the img a width of 100% height of 100%, object-fit: cover , mix-blend-mode: multiply and opacity of 0.8.

  .main-image-container{
  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

  0

  ---

  

  Madeleine De Guzman•70

  @deguzmanmadeleine22Posted almost 2 years ago

  @Hassiai I just did this and it worked great! Thank you so much for the suggestion! :D

  1
• 

  Manish Mandal•650

  @manishdevelopsPosted almost 2 years ago

  Hey Madeleine congrats on completion of this project... Do these changes for improvement of your project...

  remove element with class .main-img-overlay completely

  .main-image-container {
      background: rgba(170, 92, 219, 0.7);
  }
  .main-img {
   mix-blend-mode: multiply;
  }
  

  Hope it will solve your problem.. keep coding =)

  0
• 

  Alisher Toshmurodov•330

  @alishertoshmurodovPosted almost 2 years ago

  Hi, Madeleine.

  Great job working on this project. To solve the issue with your image overlay, you can try changing the width and height of your .main-img-overlay block to %100 instead of a fixed size.

  I hope it will help. Best of luck!

  0