Responsive Result Card with Dynamic Student Data

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  Hello, @saini-27Chetan!

  Your project is looking fantastic!

  I'd like to suggest a way to make it even better:

  • Using margin isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

  body {
      min-height: 100vh;
      display: flex; 
      justify-content: center;
      align-items: center;
  }
  

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  0

  ---

  

  Chetan Saini•90

  @saini-27ChetanPosted 8 months ago

  @danielmrz-dev Thank you for your help. I will use this in my future projects

  1

  

  Chetan Saini•90

  @saini-27ChetanPosted 8 months ago

  @danielmrz-dev On giving your style, I am getting a scrollbar, so how to get rid of that? By decreasing the min-height or other?

  0

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  @saini-27Chetan

  Your card is bigger than the original design. You need to remove the .container margins and make it a little bit shorter so it fits on the screen without creating a scrollbar. If you keep the margins, they also occupy space on the screen.

  Marked as helpful

  0