Stats Preview Card

Community feedback

• 

  Vicktor•900

  @Victor-NyagudiPosted almost 2 years ago

  Hello, Nemanja.

  This is a good try.

  If you want to align all the items in, for example, .text-card, you can give it some padding only instead of giving everything inside it some padding.

  This makes it easier since you'll only need to change the padding in one place instead of having to change it for .title, .main-text, and .stats.

  Here's an example of what the code could look like after removing the padding for .title, .main-text, and .stats:

  .text-card {
     background-color: hsl(244, 38%, 16%);
     border-radius: 12px 0 0 12px;
     padding: 1.5em;  // <- padding is applied once here. Changing this affects all elements inside .text-card
  }
  

  Another reason your solution isn't responsive is that you've given .text-card a height and width using px. This is an absolute unit that doesn't change regardless of screen size.

  Here's where you did it in the CSS:

  .text-card {
      background-color: hsl(244, 38%, 16%);
      height: 500px;
      width: 700px;
      border-radius: 12px 0 0 12px;
  }
  

  You can remove the height and width properties because this will prevent the container from growing and shrinking naturally as more content is added or taken away.

  You can then use padding to add space around the content.

  Hope this helps.

  Good luck with your future solutions.

  Marked as helpful

  0

  ---

  

  Nemanja•130

  @Dayne2xPosted almost 2 years ago

  @Victor-Nyagudi Hello, and thank you for your feedback. I'll try to apply your explanation in the next project that I start, I also went back and touched up the code as you've instructed and it works just as well. Thanks again.

  1