NFT preview card component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Kalhara Sandaruwan! 👋

  About flexbox and grid, in general, you want to use flexbox to handle a one-dimensional layout (column or row). Use grid for two-dimensional layout (column and row).

  For example, I would make the card-footer as a flex container instead of a grid container. It's because the layout is a one-dimensional layout (row).

  One suggestion I have is to use either hr element or set border-top on the card-footer element to create the line. (It is just a preference)

  I hope you find this useful!

  Marked as helpful

  1

  ---

  

  Kalhara Sandaruwan•190

  @ImpodaysPosted about 2 years ago

  @vanzasetia thank you for such great suggestions.

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Kalhara Sandaruwan, congratulations for your new solution!

  Here's one tip to improve the card responsiveness improving the pricing section. You can create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .info-bottom {
      display: flex;
      row-gap: 10px;
      flex-direction: column;
  }
  }
  

  You’ve used <div> to wrap the card container, in this case you need to use <main> since this is the main block of this page.

  ✌️ I hope this helps you and happy coding!

  0