QR component using CSS and HTML

Community feedback

• 

  Lord Robins•610

  @ZenitsuAg

  Posted over 2 years ago

  Hi MaltaWebDev, you've done an amazing job. Here are some tips to help you improve your code.

  • In the subheading class, it's better to add a h1 tag to wrap the text.
  • In the img tag, width=300 not 300px. But for responsive images in future, you can set the width to 100% or the max-width to 100% and it will scale down as automatically and it won't overflow the allocated space.
  • For the centering issue, you just add body {display: flex; justify-content: center; align-items: center;}
  • If the attribution div is causing you issues, you can just say position: absolute; bottom: 0

  So you may not really need to use CSS grid to center your code. Also, if you like the shadow, you can leave it but it's not really part of the original design.

  Happy Coding :)

  13

  Marked as helpful
• 

  Edoye•170

  @DoyeDesigns

  Posted over 2 years ago

  Good work Lord robins!

  You do not need css grid to center the page Elements. You can add;

  Body { Display: flex; Min-height: 100vh; Justify-content: center; Align-items: center; }

  You can check how I did mine. I reduced the amount of nested divs by grouping some elements into one div.

  20
• 

  Adriano•42,890

  @AdrianoEscarabote

  Posted over 2 years ago

  Hi MaltaWebDev, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  To improve the responsiveness of the project, we can do this:

  .qr-code img {
      border-radius: 20px;
      width: 100% !important;
      max-width: 300px;
  }
  

  I noticed that you used inline css to put width in the img prefer not to do that, we consider it a bad practice because in larger projects, there may be some conflict between the values ​​that we put in the html and in the css, and changing these values ​​in different files takes a lot of time!

  The rest is great!

  I hope it helps... 👍

  12