NFT Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Samantha, congratulations for your new solution!

  Your solution already looks great, the only thing you need to do now is to give it the proper vertical alignment:

  Add min-height: 100vh to make the body have 100% of the viewport height and make the container align to this size using these flex properties display: flex; align-items: center; justify-content: center; flex-direction: column;

  body {
      min-height: 100vh;
      margin: 0;
      font-family: var(--bs-body-font-family);
      font-size: var(--bs-body-font-size);
      font-weight: var(--bs-body-font-weight);
      line-height: var(--bs-body-line-height);
      color: var(--bs-body-color);
      text-align: var(--bs-body-text-align);
      background-color: var(--bs-body-bg);
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  samantha-lind•160

  @samantha-lindPosted over 2 years ago

  @correlucas Super helpful, thanks! Realised I'd done the same thing on a couple of other projects too - happy to report they're all corrected :D

  1
• 

  enochlee•600

  @iamenochleePosted over 2 years ago

  hey there, this is nice, I noticed some few stuff, the timer and clock are not well aligned, just put them both in a container and apply a display: flex; justify-content: space-between; align-items-center, You seem to be using some weird property for margins which results in your container not properly centered, try to fix this, keep coding.

  Marked as helpful

  0