Stats preview card component

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Great work on this challenge!

  When you reduce the height of the viewport until the card no longer fits on the page in its entirety, you run into an issue where the card is partially cut off, and you can't scroll to view the rest of it on top of that.

  This is happening because you've added overflow: hidden to the body element.

  By removing this property, you'll fix this issue and allow the height of the screen to adjust automatically according to the size of the viewport.

  I would also recommend changing the media query so that the page switches to the mobile version a bit earlier, perhaps at 1100px:

  @media screen and (max-width: 1100px) {
    ...
  }
  

  Of course, you can choose whatever width you'd like, but I recommend going no lower than 1100px as this is the last point at which the site still looks good on the desktop version.

  Any narrower and the whitespace on either side of the card becomes too small and hinders user experience.

  For the mobile version, I would recommend making it more responsive to improve usability on all screen sizes.

  Because you've hard-coded the width of the card to 260px, the width of the card initially looks disproportionate to the width of the viewport. This width also doesn't allow screen sizes narrower than 260px to display the card properly.

  To fix this, you can allow the card to grow to a larger width, such as 500px:

  .left {
    height: 446px; ❌
  }
  
  @media screen and (max-width: 1100px) {
    .container {
      max-width: 500px
    }
  
    .left {
      width: 100%;
    }
  
    .right {
      width: 100%;
      height: auto;
      aspect-ratio: 500 / 413;
    }
  
    .right img {
      width: 100%;
      height: 100%;
    }
  }
  

  I've set aspect-ratio: 500 / 413 on the .right element as this allows it to grow along with the viewport size while maintaining the aspect ratio of the image so that it doesn't get distorted.

  Another thing you should consider adding is some padding to your page. While this isn't strictly necessary, it improves visual balance which therefore improves the user experience of your page.

  @media screen and (max-width: 1100px) {
    body {
      padding: 20px;
    }
  }
  

  Other than that, this is a very good solution to this challenge!

  Hope this has been helpful! :)

  0
• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 9 months ago

  Hello there 👋 @KTshibangu.

  Good job on completing the challenge !

  Your project looks really good!

  I have suggestions about your code that might interest you.

  📌 First: Use <main> to wrap the main content instead of <div>.

  Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

  📌If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

  It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

  I hope this suggestion is useful for future projects.

  Other than that, great job!

  Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟.

  Happy coding.

  0