QR code using CSS

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 6 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  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

  ---

  

  SAGAR-Cdy•10

  @SAGAR-CdyPosted 6 months ago

  @danielmrz-dev Thank you for helping me

  1
• 

  Brian Hammer•180

  @BrianHammerPosted 6 months ago

  -The QR code does not center properly on my screen, and the gray border should only be added on large screens. I recommend removing the gray border, and add it last when everything else works -The text overflows from the card on my screen. This is because you have a fixed height set on the QR Card. Removing this will cause the height of the card to always fill all the elements inside -Add the 'text-align:center' style to your title like you did inside the <p> tag -The background colors do not match exactly. You can get the colors the designer used inside of the style-guide.md, and apply it to your design -The text color and font weight can be changed for the paragraph text. -A cool trick is that you can add draggable="false" inside your <img /> tag to prevent the user from dragging it EX: <img draggable="false" src="..." />

  Overall, removing the fixed height of your card element will be the biggest improvement.

  Marked as helpful

  0

  ---

  

  SAGAR-Cdy•10

  @SAGAR-CdyPosted 6 months ago

  @BrianHammer Thank you for guiding me it mean a lot to me

  1