Great solution for beginners

Community feedback

• 

  Abhishek Gulab Bhikule•200

  @Bhikule19Posted almost 2 years ago

  Hey, there amazing work,

  • I found out that the website has space more than the viewer page, due to which you can see a scroll bar.
  • Now to get rid of the extra space and bring the card to the middle and avoid a scroll bar, I rewrote your code for the body element.
  • So this is your code:-

  body {
      padding-top: 250px;
      font-style: none;
      background-size: cover;
      background-position: center;
      background-color: #f3eae3;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  • And this is what I wrote for you:-

  body {
      min-height: 100vh;
      font-style: none;
      background-size: cover;
      background-position: center;
      background-color: #f3eae3;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  • Notice the difference? Not much right I just canceled out the padding-top property which was making the extra space and letting the unnecessary scroll bar and actually added one property i.e min-height: 100vh;
  • With this, the flex properties will make more sense and the card will be placed at the center of your web page. Give it a try

  If you found this helpful you can mark this cmt as helpful

  Marked as helpful

  0

  ---

  

  4jdin•50

  @4jdinPosted almost 2 years ago

  @Bhikule19 Thank you very much, I appreciate your help and I will try to make my next code better with your solution.

  0
• 

  4jdin•50

  @4jdinPosted almost 2 years ago

  Hello, I just want to inform you that I have fixed all the errors in the code and that you can now use it if you need it.

  0