NFT-preview-card

Community feedback

• 

  Vanza Setia•27,795

  @vanzasetiaPosted over 2 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.

  2
• 

  Mark Angel Papio•810

  @ExiviuZPosted over 2 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/

  0

  ---

  

  Vanza Setia•27,795

  @vanzasetiaPosted over 2 years ago

  @ExiviuZ Never use 100vw on body as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.

  Also, avoid setting a specific height on body element. It will not allow it to grow if needed. Usually, it cause an issue on mobile landscape view where the card element is getting cut off.

  1

  

  Mark Angel Papio•810

  @ExiviuZPosted over 2 years ago

  @vanzasetia noted📝

  0