Nft Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Daud Ismail, congratulations for your new solution!

  🎨 Here’s some tips to improve your component design:

  Make the shadow smoother reducing its opacity, see a good value for this shadow: box-shadow: 9px 4px 9px 4px rgb(0 0 0 / 4%);

  To improve the solution responsiveness, make a media query to break the elements in the pricing section after width: 350px and make every content in a different row, saving space for low resolution devices.

  @media (max-width: 350px) {
  .details {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px;
      border-bottom: 2px solid hsl(215, 32%, 27%);
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Sankalpa Sarkar•520

  @IllusiveCoder1101Posted about 2 years ago

  Congrats on completing the challenge, about the mobile display issue, I think you should look into css media queries which is responsible for display on different screen sizes. Keep up the great work!!!!

  Marked as helpful

  0

  ---

  

  Daud Ismail Olakunle•20

  @EminentdioPosted about 2 years ago

  @IllusiveCoder1101

  Thank you, boss. It's helpful.

  0
• 

  Talha Khalid•200

  @talha-007Posted about 2 years ago

  Use divs and h1 tags only instead of span. you can use a div to overlay on the image which shows that eye icon. give it styling of hidden and when you hover give it a display. and you'll learn by the time don't worry it's good.

  Marked as helpful

  0

  ---

  

  Daud Ismail Olakunle•20

  @EminentdioPosted about 2 years ago

  @talha-007

  Thank you, boss.

  It's helpful.

  0