stats-preview-card-component-main

Community feedback

• 

  Engineer Providence•310

  @EngProvidencePosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  I have other recommendations regarding your code that I believe will be of great interest to you. CSS🏷️: I WILL LIKE TO GO STRAIGHT TO THE POINT your image -product image is not really responsive when resizing the screen.

  secondly your images look more of white you can correct this by making the background color of the image div purple and then reduce the opacity of the images to about 0.8 so as to make it have a slight purple color

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Emmanuel Akpan•790

  @heisemmaco-devPosted over 1 year ago

  @EngProvidence but you also that buy add this css property to it which is "background-blend-mode: multiple;" i think this is the perfect solution for that

  0

  

  Engineer Providence•310

  @EngProvidencePosted over 1 year ago

  @Moderateemmaco there many ways to solve a problem and that is your own way and i think it is also good.

  1

  

  Emmanuel Akpan•790

  @heisemmaco-devPosted over 1 year ago

  @EngProvidence yes I agree 👍

  1
• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  PiCTURE TAG 📸:

  • Looks like you're currently using media queries for swapping different version of image, So let me introduce the picture element.

  ---

  • The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts.

  ---

  • Example:

  <picture>
    <source media="(max-width: 768px)" srcset="small-image.jpg">
    <source media="(min-width: 769px)" srcset="large-image.jpg">
    <img src="fallback-image.jpg" alt="Example image">
  </picture>
  

  ---

  • In this example, the <picture> tag contains three child elements: two <source> elements and an <img> element. The <source> elements specifies different image sources and the conditions under which they should be used.

  ---

  • Using this approach allows you to provide different images for different screen sizes without relying on CSS, and it also helps to improve page load times by reducing the size of the images that are served to the user

  ---

  • If you have any questions or need further clarification, you can always check out my submission for this challenge and feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  Nascimento•360

  @NacsimentoPosted over 1 year ago

  Thank you so much for that feedback.Will definitely work on it@0xAbdulKhalid

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="card-container"> with the main tag to make the content/ page accessible. click here for more on web-accessibility and semantic html

  To center .card-container on the page using flexbox or grid instead of margin:

  • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  • USING GRID: add min-height:100vh; display: grid place-items: center to the body

  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  For the color of the image, there is no need to give the img a background-color but rather add mix-blend-mode: multiplyto the img.

  img{
  width: 100%;
  display: block
  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 and here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0
• 

  Emmanuel Akpan•790

  @heisemmaco-devPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  I have other recommendations regarding your code that I believe will be of great interest to you. CSS: I WILL LIKE TO GO STRAIGHT TO THE POINT your images look more of white you can correct this by making the background color of the image div purple and then apply this property to the div:

  "background-blend-mode: multiple;"

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Marked as helpful

  0