NFT preview card component

Community feedback

• 

  Aaron•110

  @ag7621Posted almost 2 years ago

  Hello!

  Although I'm pretty new to web dev, I think your project looks great! One tip if I may suggest is centering your card using something like flex or grid instead of setting a margin-top on the body so that it remains responsive.

  The method I use is setting a html, body { height: 100%} on a css reset. Next is setting the body { display: flex; align-items: center; } to center it vertically on the page.

  The issue I've come across using an attribution and flex is that it centers both the content and attribution together. To combat that I've been setting mine as a footer with the following

  .attribution {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  }
  

  the bottom: 0; and left: 0; pushes it to the bottom, and left with width: 100%; allowing it to take the full width of the page. Lastly text-align: center; to allow it to center within the width. This resource has helped me in learning how to use flex CSS Tricks - Flexbox

  Hope that helps some. Happy Coding!

  -Aaron

  Marked as helpful

  0

  ---

  

  Kyle Kasprzyk•260

  @kylekasprzykPosted almost 2 years ago

  @ag7621, thank you for the help! I will try this and check out the article on how to use flex. Thanks!

  0