Stats Preview Card Component

Community feedback

• 

  Chow Jia Ying•145

  @C-likethis123Posted over 3 years ago

  Why your h2 elements don't align with the secondary p elements:

  • It's because of the rule:

  @media (min-width: 768px){
      .information p:first-of-type{
          margin: 5% 15% 2% 10%;
      }
  }
  

  I think you intended for this rule to target the first <p> element in the <div class="information"> element, but it ended up targeting all the p elements in that element.

  There are two ways about it:

  • Assign an ID to the <p> element, and apply that rule based on the ID selector. Eg I would change it to <p id="description"> Then my rule will be changed to

  @media (min-width: 768px){
      .#description {
          margin: 5% 15% 2% 10%;
      }
  }
  

  • Another way is to override the margins in the <p class="upper"> elements. Originally p.upper{} alone was not specific enough (refer to CSS selector specificity), so I had to specify:

  @media (min-width: 768px){
      div.data_text p.upper {
          margin: unset;
      }
  }
  

  Onto other comments:

  • I like how your code is mobile first and the fact that you used CSS resets.
  • However on some screen sizes (around 900px), the statistics overflowed out of the container, so you might need to consider these screen sizes as well.
  • On smaller screen sizes, it looks nicer if there was lesser horizontal padding so there is more space for text, eg:

  information {
      padding: 12% 5%;
      flex: 2;
  }
  

  instead of just padding 12%;

  1

  ---

  

  Anderson Vallejo•320

  @VallejoandersonPosted over 3 years ago

  @C-likethis123 Wow, thanks for helping me, I really appreciate it! I've add your recommendations to my code. Thank you A LOT! :D

  0
• 

  NWANKWO HENRY IFUNANYA•45

  @momeniHINPosted over 3 years ago

  You might want to adjust the Image height on mobile view. Nice work.

  0

  ---

  

  Anderson Vallejo•320

  @VallejoandersonPosted over 3 years ago

  @momeniHIN Thank you for your review!

  0