NFT Preview Card Component

Community feedback

• 

  Adriano•38,290

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Jeanco Volfe, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
  }
  

  ``<hr>is not the best choice to make the risk rather useborder`!

  The rest is great!

  I hope it helps... 👍

  0
• 

  Lindelwe Khumalo•170

  @iSoyecodesPosted almost 2 years ago

  Hello, congratulations on completing this challenge. If you want to center your card, all you have to do is set a minimum height for your container before using flex-box or grid to do so.

  .container { width: 100%; min-height: 100vh; }

  and then after this you put grid or flexbox to center your card

  For example is you are using grid

  .container { width: 100%; min-height:100vh; display: grid; grid-template-columns: 1fr; place-items: center; }

  For Flex-box

  .container { width: 100%; min-height: 100vh; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; }

  Please Maark as useful id this helps you out with centering your card

  0

  ---

  

  Jeanco Volfe•460

  @engsofjvolfePosted almost 2 years ago

  @iSoyecodes please, if u could see my code and help. Actually im not tryng to center the card. Im trying to make it fits inside the screen because it's scrolling. I always face this problem and dont know what to do. I tried what u said, but my card got even bigger then before hahah. Thx a lot

  0
• 

  derCalle.exe•210

  @pascal-prfstPosted almost 2 years ago

  A realy easy way to center your div/element is for example:

  body {display: grid; place-content: center} or body {display: flex; align-items: center; justify-content: center}

  But in both cases your body needs a fixed hight and width of 100% or 100vw/100vh

  Happy coding

  0

  ---

  

  Jeanco Volfe•460

  @engsofjvolfePosted almost 2 years ago

  @pascal-prfst Hey bro, thx for this message... Actually i know how to center, but in my case its not about centering elements; i mean the element dont fit the screen even when its supposed to be done. Each and every code that i write is always with a scrollbar. I tried to set height of each tag (particularly my containers), but it didnt work as well. I'm a begginer, and i have been trying to find a help for this "bug" i have since i get started writing css. As i study by myself its been hard to fix.

  0

  

  derCalle.exe•210

  @pascal-prfstPosted almost 2 years ago

  @engsofjvolfe When I view your site I have no scrollbar. No matter on what screen-size I look.

  0