Responsive QR Page using HTML and CSS

Community feedback

• 

  Danijel Adrinek•420

  @DanijelAdrinekPosted 8 months ago

  Hey Krishna I liked your project and decided to take a look at it for a bit, and I found some things I think you can improve on.

  1. You should remove the margin on the body, and give height: 100%; values to both the body and html tag

  2. after doing that you can add position: relative; to body tag, and position: absolute; to card, then add transform: translate(-50%, -50%); to center the card in the middle of the page.

  3. You should add the text together in one div that should be called text-container, it makes it easier to manipulate the text like that, especially if you're good at using flexbox!

  4. Use CSS variables, they are a powerful tool to help make your code more readable and easy to manipulate

  I hope these tips help you become a better web developer, and help you on your journey towards getting this amazing job, and if you want to learn more mind-blowing tips on solving this challenge, I did actually make a blog post that shows how to properly do that, so if you are interested in learning more, here is the link for that:

  https://dev.to/danijeladrinek/frontend-mentor-qr-code-challenge-4g9h

  if you have any more questions feel free to let me know, have an amazing day, and happy coding :)

  Marked as helpful

  1

  ---

  

  KrishnaPoddar1•400

  @KrishnaPoddar1Posted 8 months ago

  Hey @DanijelAdrinek. Thank you for taking your time to give me this advice. I have utilized them in my projects hereafter. There's one thing I dont understand though why should I give the body and html tags a height of 100%?

  1

  

  Danijel Adrinek•420

  @DanijelAdrinekPosted 8 months ago

  @KrishnaPoddar1 to take up the entire screen of the user, and properly center the card in the middle of user's screen

  0

  

  KrishnaPoddar1•400

  @KrishnaPoddar1Posted 8 months ago

  @DanijelAdrinek Thank you!!

  1