NFT-preview-card-component with flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello again Anass, Congratulations on completing this challenge!

  Two tips about responsiveness to improve the NFT Card:

  1.Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 340px will not grow or shrink because the size will be ever the same, but a container with max-width: 340px or min-width: 340px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  .nft-card {
      display: flex;
      background: hsl(216, 50%, 16%);
      max-width: 270px;
      height: 460px;
      border-radius: 10px;
      flex-direction: column;
      align-items: center;
      position: relative;
  }
  

  2.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1