Frontend Mentor - NFT preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Luis-Olivero, congratulations for your new solution!

  Here's a tip for you about the card responsiveness:

  Replace width: 90%; with max-width: 320px; to make the container responsive, not that with 90% the card is too big, use instead a value around 320px

  .card {
      background-color: var(--Very-dark-blue-card-BG);
      margin: auto;
      max-width: 320px;
      padding-top: 0.5em;
      border-radius: 20px;
  }
  

  For the proper size in the profile image use 30px for height and width:

  .card__profile--img {
      /* width: 20%; */
      max-width: 30px;
      max-height: 30px;
      align-items: center;
      justify-content: center;
  }
  

  👋 I hope this helps you and happy coding!

  0
• 

  Draco•160

  @dracowarzPosted about 2 years ago

  Hello Luis-Olivero!

  1. For the horizontal line color, you can put this color: rgba(0, 0, 0, 0.3); Here the link you can pick any color you want: https://www.w3schools.com/colors/colors_picker.asp

  2. For the active state, you have to use :active selector. You can check on this link: https://www.w3schools.com/cssref/sel_active.asp

  Happy Coding!

  0