Stats-preview-card-component with html, css.

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Maksim, Congratulations on completing this challenge!

  You did a good work putting everything together in this challenge, something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

  To make the image have a better fit inside of it, make the component image responsive with display: block and max-width: 100% (this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover.

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  The way you’ve applied the purple color is fine, but if you want the exact color tone of color of the challenge designs, you need to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

  img {
  mix-blend-mode: multiply;
  opacity: 75%;}
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hello

  Try to get this closer to the design if you can

  • border radius
  • image doesn't need the pseudo at all, you can give that side of the card a background color. Use mix-blend mode and opacity to make it more like the design
  • image display block (the pseudo and image are misaligned atm)
  • center text properly on all mobiles - it is off center on my phone

  I think you need to lose all the percentages you're using in your css too. You're making it very difficult for yourself using % for things like padding and margin. Rem would give much better control. You don't want these spacings to all shift so much and in a full webpage you'd struggle to create the designs vertical rythym

  Good luck

  Marked as helpful

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Ps make sure you fix the html error. Read up again about how to use img srcset and sizes, this isn't right atm

  Marked as helpful

  0