Stats-preview-component-card CSS/HTML

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Marko, Congratulations on completing this challenge!

  Here's some tips to improve your solution:

  1.The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more adding the auto-crop property you can add object-fit: cover to make the image crop inside the container its inside.

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

  2.Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

  3.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

  ---

  

  Marko Djurdjevic•210

  @FrozennnPosted about 2 years ago

  @correlucas Hey,

  Thank you very much for your feedback, this is exactly what I wanted to know.

  I will start using these tips you gave me in my future challenges.

  1