stats-preview-card using HTML5 and CSS

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted about 1 year ago

  Hi, @wobin1.

  That's a good solution. Keep coding. Here are some tips.

  1 - You need the box-sizing: border-box declaration to fully control your elements' box-model. I saw margin: 0; padding: 0 in your body element selector and you were trying to reset the box-size of your elements, this is useful for us but if you don't use the box-sizing: border-box declaration this ruleset won't work as expected.

  You can use this ruleset this way:

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

  There are several good resources to help you understand this concept:

  • https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  • https://www.youtube.com/watch?v=WlGQdgy-M6w

  2 - Another thing is about your code, you can use padding to give some space in your container item. Don't use it for your child items. We can use margin to add some space between our child items inside the container.

  If you use padding for your child elements, padding values will be added to the content area of your child elements, that means your content will appear larger than its content because of the padding added within it.

  To avoid this confusion, you can use margin values and it won't be added to the content area of the elements.

  For example: You can use this

    .detail{
      margin-top: 1.5rem;
      margin-bottom: 2.5rem;
    }
  

  instead of

    .detail{
      padding-top: 1.5rem;
      padding-bottom: 2.5rem;
    }
  

  To improve this you can use one direction for the margin and your code will be more readable, you can use margin-bottom or margin-top for all your child items.

  For example;

    child-item1 {
    margin-bottom: 1rem;
  }
  
    child-item2 {
    margin-bottom: 1.3rem;
  }
  
    child-item3 {
    margin-bottom: 1rem;
  }
  

  I hope these will help you. Keep coding and have a wonderful day.

  Marked as helpful

  1

  ---

  

  Nathaniel Dauda Musa•40

  @wobin1Posted about 1 year ago

  @adonmez04 Thanks a lot for taking the time to give me feedback on this. I really appreciate it, I'll implement all your suggestions. Thank you once more!

  1