Responsive Stats preview card component using Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Husam, congratulations on your solution!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  1.To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

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

  Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  2.1.The easiest way to build this component and make sure that each column will have 50% of the container size is by using GRID. All you need to do is to use display: grid to activate the Grid and then make the two columns with grid-template-column: 1fr 1fr and its done, now you’ve two columns. For the MOBILE VERSION you can switch to flex creating a media query using display: flex and flex-direction: column-reverse to make the image appear before the text content.

  2.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%;
  }
  
  
  3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet:
  [**https://piccalil.li/blog/a-modern-css-reset/**](https://piccalil.li/blog/a-modern-css-reset/)
  
  
   
  **✌️ I hope this helps you and happy coding!**
  

  Marked as helpful

  0