Stats preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello MhmodMD, congratulations for your new solution!

  You've used CSS to import the image with background-image I think is a better alternative to use <picture> or <img> because is better for SEO reasons, since giving the image background-image you say to the search engine that's not a relevant content so you can manage the product image inserting the tag <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html

  If you're not familiar with the picture tag you can look at the documentation to see how to set it: https://www.w3schools.com/tags/tag_picture.asp

  To add the exact same purple overlay effect for the image, matching the design files you can use, filter, background-blend-mode or mix-blend-mode (the best choice in my opinion). See the code below

  img {
  mix-blend-mode: multiply;
  opacity: 0.8;}
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  MhmodMD•230

  @MhmodMd1Posted about 2 years ago

  @correlucas Oh Thank You very much

  0
• 

  Fathul Irfaan Abdillah•320

  @thefathdevPosted about 2 years ago

  Hi MhmodMD 🙌

  You're really doing great job on this challenge, congrats!

  To fix the mobile container problem, you may try this:

  1. you may specify max-width property instead of width in .parent .card class selector
  2. you may add margin-inline property in .parent .card to make space between the card and the both side of the screen Anyway, I've made a pull request to your repository ⬆️

  I hope this feedback is helpful, happy coding! ✨

  Marked as helpful

  1

  ---

  

  MhmodMD•230

  @MhmodMd1Posted about 2 years ago

  @whatTheFath I took the pull request. And thank you for such help

  1

  

  Fathul Irfaan Abdillah•320

  @thefathdevPosted about 2 years ago

  @MhmodMd1 You're welcome, happy coding✨

  1