Stats preview card component

Community feedback

• Account deleted

  Hello Coder 😊

  Your solution is great✨ and congratulations for successfully completing an another newbie challenge🎉

  and there is a small suggestion that might be helpful for you

  min-height :

  You can use min-height instead of height

  because height will put your element to a size of 100% of it's container. min-height will put the element to min 100% of the container size.

  if we set min-height: 100vh then the main will start at 100vh, if the content pushes the main beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space

  and it will helpful when you make responsive solutions

  Hope that was helpful 😊

  Marked as helpful

  0

  ---

  

  Jarlei Sassi•170

  @jarleisassiPosted over 1 year ago

  @MrSandipSharma Putting in practice from now on :D Thank you very much

  0
• 

  Murilo Moraes Cabral•130

  @murilomcabralPosted over 1 year ago

  Hey, Jarlei Sassi! I'm still learning, don't even work with this yet, but I hope one day, soon, I'll be able to start my career. 🥳

  What I've notice, at first, was the reset settings that you made using many selectors. What I do and maybe could be better in that case, is to use a selector like this:

  *, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  

  The * selector here, is used to select all elements at once.

  💡 You can see more about selectors in W3Schools - CSS Selector Reference and more about combinators in W3Schools - CSS Combinators.

  About the image, you can use it in a img element inside a picture one. You can make the picture with a background-color of soft violet and for the img use mix-blend-mode with value multiply. That well you also can adjust the image opacity so it can better match the original design.

  About picture in W3Schools - HTML <picture> Tag.

  mix-blend-mode: multiply;
  

  Again, I'm still learning! I hope this can help with something. 😃

  Marked as helpful

  0

  ---

  

  Jarlei Sassi•170

  @jarleisassiPosted over 1 year ago

  @murilomcabral Fala Murilo, beleza? The reason I am using al of these selectors is because It's a tool I found on this website. https://meyerweb.com/eric/tools/css/reset/

  It's something I learned from someone many years ago.

  About the image blending to the background, it's something that was tricky. I must confess that I wasn't happy with the result. Anyway, thanks for the advice, I'll use your method next time. Really appreciate it

  1