NFT Preview card

Community feedback

• 

  Aakash Verma•9,500

  @skyv26

  Posted over 3 years ago

  Hi! Umair, Really nice job, I checked you work and design responsiveness and I have noticed few issues.

  1. I saw that your .price-time div container content is not aligned properly. You can also see that your 3 days left text and 0.041ETH text is not aligned properly with respective icon. Just update your CSS code with below:

  .time-container {
      display: flex;
      align-items: center;
      gap: 0.25rem;
  }
  
  .price-container {
      display: flex;
      align-items: center;
      gap: 0.25rem;
  }
  

  by adding above properties in both container you will see some better output.

  2. In mobile response, your card sticked with left edge of the viewport and not aligned properly. and I checked your code and found that you have not added margin: auto; property. So just add this property in your below code

  .card-container {
      background-color: hsl(216, 50%, 16%);
      width: 300px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      padding: 25px;
      box-shadow: 0px 10px 40px black;
      margin: auto;
  }
  
  

  It will center your card. Below 375px you need to add some margin-top value and then it will be good.

  Overall nice job. I hope you understand and my suggestion might be helpful for you.

  Best Of Luck

  11

  Marked as helpful