NFT Preview Card

Community feedback

• 

  P

  birkaany•240

  @birkaanyPosted about 2 years ago

  Hello,

  Few things I think you can improve;

  • Instead of using main tag to style background, you could style body element directly. Within your way, background gets shrinking on smaller dimensions. body{ height: 100vh; background: #0d192b; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  • Instead of .container-img class within div, you could use <picture> tag directly. Better use for SEO.

  Also I really loved your overlay transition solution for view icon. Congrats!

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @iasminln, Congratulations on completing this challenge!

  👨‍💻 Here are some tips to improve your solution code:

  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) {
  .modal .container-text .infos {
      display: flex;
      justify-content: space-between;
      padding-bottom: 0.9375rem;
      border-bottom: 1px solid #2f415b;
      margin-bottom: 0.9375rem;
      flex-direction: column;
      align-items: center;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  0