QR Component

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted 3 months ago

  Hi @nikhil-987,

  To center your card in the middle of the screen, you can update your body styles with the following CSS:

  body {
      display: grid;
      place-items: center;
      height: 100vh;
      margin: 0;
  }
  

  Explanation:

  1. display: grid: Turns the body into a grid container.
  2. place-items: center: Centers the content both horizontally and vertically.
  3. height: 100vh: Ensures the body takes up the full viewport height.
  4. margin: 0: Removes any default body margin for proper alignment.

  This approach ensures your card is perfectly centered, regardless of the screen size.

  Let me know if you need further assistance! 😊

  Marked as helpful

  0
• 

  Savalaram Redkar•10

  @savalaram-redkarPosted 3 months ago

  1. While your solution uses Flexbox, the card is not perfectly centered in the middle of the viewport as per the Figma designs. The card should have equal spacing around it both vertically and horizontally. Consider ensuring the justify-content and align-items properties are set correctly on the parent container and that the height of the container spans the full viewport (height: 100vh).

  2. Instead of using a <p> tag for the title, use a heading tag like <h1> or <h2>. This is more semantically appropriate and improves accessibility for screen readers.

  3. Avoid inline styles and keep all styles within the CSS file for better maintainability.

  0