QR code component | Responsive | HTML CSS

Community feedback

• 

  Abdullah Farea•180

  @AbdullahFareaPosted almost 3 years ago

  You did almost everything right except one thing and it's the body backgound-color, you used the "grayish blue" color instead of the "light gray" one. You should put the card inside a div, article, section tag instead of the "main" tag

  Marked as helpful

  2

  ---

  

  Tushar Biswas•4,080

  @itushPosted almost 3 years ago

  @AbdullahFarea Thank you very much for the feedback. It was really helpful.🙏

  1. background-color is now light gray.
  2. The card is now inside of a section.

  Looking forward to receiving more feedback from you in future.

  Happy to connect & Happy Coding 😄

  1
• 

  Clément Creusat•1,655

  @ccreusatPosted almost 3 years ago

  Nice job ! Although, I think you don't need those widths in vw. Max-width: 320px (or in rem unit) would be enough. The window resize gives a strange effect on your component.

  If you want your component more centered, take a look to display: flex and place-items: center. Your html and body tags will need min-height: 100vh;

  Marked as helpful

  1

  ---

  

  Tushar Biswas•4,080

  @itushPosted almost 3 years ago

  @ccreusat Thank you very much for the feedback. It was really helpful.🙏

  1. Max-width in rem unit is better than width in vw. It has been taken care of.
  2. display: flex and place-items: center are a very powerful combo. However, instead of using main{ display: flex; flex-direction: column; place-items: center; }' I'm using section{
     margin: 10vh auto; }`
  3. Still not sure why should I use html, body{min-height: 100vh;}. Over complicating things with this & this, while finding a simple answer.

  Looking forward to receiving more feedback from you in future.

  Happy to connect & Happy Coding 😄

  1