Responsive NFT Preview Card (HTML, CSS)

Community feedback

• 

  Debabrata Banik•730

  @DebabrataBanikPosted 2 months ago

  Great work on the design!

  You might want to center the card in the viewport. For that you can first remove the margin-top: clamp(62px, 16.533vw, 152px); and also remove the margin-inline:auto from your card component. And add some css to the main tag:

  main{
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  Since the main tag contains the card, this CSS will center the card within the viewport without needing to manage margins manually.

  Using clamp() for margin-top is useful when adjusting spacing based on viewport size. However, because the goal is to keep the card consistently centered, flexbox is a simpler and more effective solution.

  0