NFT Card responsive CSS/HTML

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Muhammad, congratulations for your solution!

  Answering your question about the alignment:

  I saw your code and there's two things you should add to the body and the div named card. First your need to apply height: 100vh; to display 100% of the viewport height and then use display: flex; and its alignment properties: justify-content: center; height: 100vh;

      display: flex;
      background-color: hsl(217, 54%, 11%);
      align-items: center;
      justify-content: center;
      height: 100vh;
  }
  

  The you add to the card another display: flex; for the alignment vertical to the div content with flex-direction: column et voilà your card is aligned.

      display: flex;
      padding: 20px;
      width: 350px;
      margin: 0 auto;
      background-color: hsl(216, 50%, 16%);
      border-radius: 10px;
      flex-direction: column;
  }
  

  I've tried that and works, try you too and write me here Muhammad. Hope it helps.

  Marked as helpful

  1

  ---

  

  Muhammad Salman•50

  @Salman-41Posted over 2 years ago

  @correlucas Thanks

  1
• 

  Muhammad Salman•50

  @Salman-41Posted over 2 years ago

  how do I center it vertically?

  0