QR code component - HTML/CSS

Community feedback

• 

  Alexej Kunz•60

  @Orchi1904Posted over 1 year ago

  Hey MarkyDDev,

  I looked through your solution and really like it but there is one easy fix that makes it much better. You could center your container not only horizontally but also vertically. This can be achieved by changing your body-style in CSS from this:

  body {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    margin: 1.5rem;
    background-color: hsl(212, 45%, 89%);
  }
  

  to this:

  body {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    margin: 1.5rem;
    background-color: hsl(212, 45%, 89%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  As you can see I added four lines of code:

  • height: 100vh; is used so that the height of the body is the full viewport height. This is important for the flexbox, because if you dont specify that, the container will not be centered.
  • display: flex; justify-content: center and align-items: center; are used to center the container both horizontally and vertically inside the body. Justify-content centers it horizontally and align-items centers it vertically in this case.

  With this four lines of CSS you can center the container and your solution looks closer to the original design. You could also reduce the size of the QR-Code a little bit, this would also help to get your solution closer to the original.

  I hope this was helpful to you. Happy coding!

  Marked as helpful

  0

  ---

  

  MarkyDDev•70

  @MarkyDDevPosted over 1 year ago

  @Orchi1904 Hello Orchi, thanks for the advices. I will definitely take them in consideration.

  1