stats-preview-card-component

Community feedback

• 

  Salah Shadoud•240

  @SalahShadoudPosted over 1 year ago

  hey! Nice Work There just wanted to leave some notes about things i would do differently:

  • for the main-container you don't need to set margins to align it to the center, instead you can use the align-items: center property on the father conatiner -- main content div in your case -- because margins is not a great way to align things.

  • for spacing inside containers and between elements, i think setting padding for the whole container and gap between elements when using flexbox is a better way, because its easier to adjust than having several paddings and margins to work with.

  • i encourage you to learn about CSS RESETS before starting any challenge, it will get rid of all elements default behaviors, and i will leave this link for you if you wanna learn more about this subject CSS Resets.

  Happy Coding

  Marked as helpful

  1
• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  Hi! Great Work Out There , I just want to share how I achieve the color overlay of an image to match the design reference. using the CSS property mix-blend-mode: multiply, and it worked well for you. Additionally, for smaller screens with a width of 375px, I noticed a slight gap in the image. To address this issue, I recommended using the CSS property vertical-align: middle.(the bold text is the code i modify in your source code)

  That's all I hope this suggestion helps and works . happy coding !

  .image-header {

  max-width: 100%;

  /* -webkit-filter: opacity(0.25) drop-shadow(0 0 0 hsl(277, 64%, 61%)); */

  mix-blend-mode: multiply;

  opacity: 0.8;you can adjust this

  vertical-align: middle;

  }

  .image-container {

  grid-row: 1/2;

  background-color: blueviolet;you can change this;

  }

  Marked as helpful

  1