NFT-preview-card

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hi there! 👋

  I can't view your code. I assume that it's because the repository is a private repository. So, make it public instead.

  Regarding your question, you can try using grid instead. But, I don't recommend using absolute positioning. It makes the element out of the normal flow which can introduce some bugs.

  By inspecting the body element I have a few suggestions for you.

  • First, remove width and height from the body.
    • Not only setting width: 100vw can cause an overflow issue but also by default the body element has 100% of width.
    • For the height since it is necessary to make the card vertically center, I suggest using min-height instead. This way, the body element is allowed to grow if needed.

  I also notice some inline styling. I suggest moving all the styling to external CSS. It's best to separate the HTML and CSS on their own file. Also, inline styling is not reuseable and hard to maintain.

  Hope this helps.

  20
• 

  Mark Angel Papio•810

  @ExiviuZ

  Posted almost 3 years ago

  Set 100vh and 100vw to parent then put margin auto to the child you want to vertically and horizontally center. You can also set display grid then set place-content:center.

  https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/

  02