NFT Preview Card using HTML & CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @Johan-Jubin!

  Your project looks great!

  About your question:

  • When you add height: 100vh; to the body, it means that all the content inside of will ocuppy the full height of the screen (100% of the viewport height - vh). If your content height is not higher that the screen, there won't be a scrollbar. So what you did is right.

  I have one more thing to say:

  • Since the image is a clickable element, it's a good practice to add cursor: pointer to it.

  Other than that, my friend, you did an excelent job!

  Marked as helpful

  1

  ---

  

  Johan Jubin•90

  @Johan-JubinPosted 11 months ago

  Thanks @danielmrz-dev for your valuable feedback!

  I never knew about vh units before until now. Btw, is there any other way to position a div/element vertically without vh?

  Like in my case, initially, I tried percentages, but it brought no change to the card (ig display:flex; may have a role in it). Then I tried px units, thought it wouldn't be quite responsive. Then finally I put vh units copied from yt.

  So my doubts is Are there any other means to vertically position an object? (we can use margin:auto for horizontal position, but anything for vertical position?)

  1

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  @Johan-Jubin

  There is. You can also use position and transform to move an element from its original position. For example, you can center an element like this:

  .element {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
  }
  

  In which transform: translate(*horizontal axis*, *vertical axis*).

  This one is a bit harder to deal with, but in simple projects with one centered element, is very useful.

  1

  

  Johan Jubin•90

  @Johan-JubinPosted 11 months ago

  Thanks for the advice @danielmrz-dev You rock!

  1