Responsive Qr Code Component using HTML and CSS

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Chibuzor Isaac! Congratulations for your first challenge completion!

  I saw your solution and I've some tips to give you if I could:

  1.Body align the component using flexbox is better than use margins, apply these properties to align the body and them the card component. Flexbox to allow the flex properties that will align vertically your card align-items: center; justify-content: center; and height: 100vh; to display 100% of the viewport height (full screen).

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

  2.You've set two width properties for the same container look.container {width: 1200px; max-width: 100%;}. To fix that use only max-width and try a precise value like max-width: 340px to keep the card with a proper size. No need of margin: 0 auto; since the aligment comes from the body.

  .content { max-width: 340px; background-color: white; padding: 30px; border-radius: 20px; }

  3.The background color is slight different from the reference, try a value like background-color: hsl(212, 45%, 85%);

  Try that and say me if works bro, happy coding and I hope it helps you!

  Marked as helpful

  1

  ---

  

  Chibuzor Isaac•20

  @ChibuzorIsaacPosted about 2 years ago

  @correlucas thanks Lucas! I really appreciate the feedback. Been away for a while now but now I'm back to tackle these challenges head on!

  Happy coding!

  0