NFT preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Osama Salem, Congratulations on completing this challenge!

  Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:

  To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .split {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Akram Adjab•380

  @akramAdjabPosted about 2 years ago

  Hello Osama, and congrats for completing this challenge

  I checked your solution, and it was a very clean code. But there is a small problem that is disrupting your design

  • The overflow: hidden property must be deleted from the main tag to extend your component to all screens because in this case the component's content will be hidden to match the screen height property height: 100vh
  • You can also make your component responsive on all screens by writing:

  @media only screen and (max-width: 25em) {
     html { 
        font-size: 50% // this will decrease your font-size to 8px
      } 
  } 
  

  I hope my feedback is helpful 🙌🏻

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Osama, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • usemain tag to wrap the content of page for improve the Accessibility
  • you can use article tag instead of main to the container card for improve the Accessibility
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content

  Hope this help! Happy coding 😉

  Marked as helpful

  0