QR Code Component Challenge

Community feedback

• 

  Sophia Koulen•150

  @sophiakoulenPosted over 2 years ago

  Hi!

  Your solution looks good. Here are my thoughts on your code:

  I wouldn't personnaly use the <br> tag to force line breaks since you might want your component to adapt to multiple screen sizes.

  I found that putting most of your code in a media query makes it less readable. I'd put only the things that change inside a media query and avoid them if i can find another solution. (For example, using vwas a unit, using the modern clamp(), min(), max()to adapt widths or font-sizes.)

  I'm curious as to why you chose display:inline-block;.

  A quick fix for the vertical centering is to have a height:100vh on your .screen, and either use

  display:flex;
  align-items:center;
  justify-content:center;
  

  Or

  display:grid;
  place-items:center;
  

  Hope this helps!

  Marked as helpful

  1
• 

  Priya Garg•200

  @Priya366Posted over 2 years ago

  Hi lanV Good job! Your code looks good.

  As per your question, Your container can be centered vertically and horizontally by using:

  body { background: hsl(212, 45%, 89%); padding: 0; margin: 0; width: 100%; box-sizing: border-box; font-family: 'Outfit', sans-serif; display: flex; height: 100vh; flex-direction: column; }

  By setting ( flex-direction: column) Both screen and attribution will be directed in column and the card will be centered.

  I hope this will be helpful.

  Marked as helpful

  0

  ---

  

  IanV•90

  @ivdevelopmentPosted over 2 years ago

  @Priya366 Hi there! Thank you I really appreciate the help :) Happy coding!

  0