NFT Preview Card Component using SCSS

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted over 2 years ago

  Congrats on completing this challenge!

  I noticed that you're using the Line Break Element <br> incorrectly. This element is used for making a line break in texts.

  https://www.w3schools.com/tags/tag_br.asp

  To create the space between the main text and the author section, you should use margin.

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Ionut Patrascu, congratulations for your new solution!

  Your card component is just perfect, all the design specs are matching, one thing you can improve is the responsiveness, in this challenge you don't even need a media query, to manage the responsiveness of the card all you need to do is replace the properties width and max-width and you'll not how you card will behave.

  Here's some changes I did for your code:

  @media only screen and (max-width: 600px)
  .card {
      max-width: 15rem;
  }
  .card {
      max-width: 20rem;
  
      padding: 1rem;
      border-radius: 15px;
      background-color: hsl(216deg, 50%, 16%);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  

  👋 I hope this helps you and happy coding!

  0