NFT preview card component using HTML CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Maksim, Congratulations on completing this challenge!

  Make the vertical alignment using flex properties and min-height. First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  body {
      min-height: 100vh;
      margin: 0;
      padding: 0;
      background-color: var(--Main-BG);
      font-family: 'Outfit';
      font-weight: 400;
      color: var(--Soft-blue);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  To improve your component overall responsiveness, something you can do its to 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) {
  .card-body-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 1.6em;
      border-bottom: 2px solid var(--Line);
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  0