Stats preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @osamanazakat, congratulations for your new solution!

  I saw your solution's live site and I've some suggestion for you Osama:

  To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

  Here’s how you can add this to your img selector: img { mix-blend-mode: multiply; opacity: 84%;}

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

  main {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap-reverse;
      padding-top: 9em;
  }
  

  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

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  osama•270

  @osamanazakatPosted about 2 years ago

  @correlucas Thanks for the Help Bro 😊

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi,

  Congrats on completing the challenge just a few suggestion to look at. 1. On the main element you can remove the padding-top and add a min-height: 100vh to center the card, see below rule for the body:

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

  2. On mobile set a flex-direction: column; to stack the two flex container items. 3. Add the viewport tag in head of the html document for the website to scale properly on mobile devices: <meta name="viewport" content="width=device-width, initial-scale=1.0">

  Marked as helpful

  1

  ---

  

  osama•270

  @osamanazakatPosted about 2 years ago

  @hyrongennike Thanks for the help Bro 👍. Can I ask you one more thing ? I couldn't make stats vertical in mobile view. Can you tell me something about that?

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @osamanazakat you can add the following two declarations on mobile to the .stats-container

  flex-direction: column; 
  align-items: center;
  

  also remove the fixed height from the .text-container on mobile. add flex-direction: column-reverse; to the main element on mobile. Remember to add the viewport tag in the head so that everything scales properly on mobile.

  Marked as helpful

  0

  

  osama•270

  @osamanazakatPosted about 2 years ago

  @hyrongennike Thank You Brother

  0