QR Card Component

Community feedback

• 

  P

  Justin Connell•720

  @justinconnellPosted 8 months ago

  Hi @viveknagesh21, Congratulations on submitting your QR Code solution! the design looks good.

  I see you managed to centre the card nicely with FlexBox and having read your comment on how you got to that solution, I agree, FlexBox is great for achieving this goal.

  I tried looking at the code repo but the link is broken so I used the browser to take a look at the code and have the following suggestion:

  .container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      /* margin: auto;  -- you don't need this if you set the width*/
     width: 100vw;
      border-radius: 10px;
  }
  

  An alternative solution is to use:

  .container {
      height: 100vh;
      width: 100vw;
      border-radius: 10px;
      display: grid;
      place-content: center;
  }
  

  I hope you find this feedback helpful!

  Keep up the great work! J

  Marked as helpful

  0

  ---

  

  viveknagesh21•60

  @viveknagesh21Posted 8 months ago

  @justinconnell Thanks for the feedback, J. Good point about the margin! I will definitely explore CSS Grids thoroughly.

  1
• 

  Lucia Verde•60

  @LuciaVerdePosted 8 months ago

  Hello ! First of all... congratulations on submitting your QR code solution!

  Although I am a beginner, I have two suggestions that may be helpful:

  • it's a good practice to use landmarks. You would probably like to wrap this card in a <main> landmark. Landmarks are structural elements that help assistive technologies and users navigate through a web page more efficiently by providing semantic meaning to different sections of the content.

  • It is better for font sizes to use rem instead of px. Rem provides flexibility, accessibility and consistency in web design.

  I hope this is useful ! keep going !

  0