QR code component

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hey there,

  The best way to center a component is using grid or flexbox (they can center things both horizontally and vertically pretty easily). You could add this to the body: display: grid, place-items: center, min-height: 100vh.

  I'd also note some best practices missing here:

  1. Use classes instead of IDs! Many times, you'll want to reuse the same styles for different elements which you can't do with IDs, as they are meant to be unique. There aren't many reasons to use IDs for styling to be honest, it's best to keep them to add some javascript (there can be exceptions of course, but as a rule of thumb use classes when you can).

  2. There are way too many comments which makes it a bit hard to read your code. So unless you find them super useful, maybe use just a bit less!

  3. You can remove the height from your container, it's not needed. Every element has their own height which is usually enough to work with! Setting an explicit height on things can easily cause an overflow. If the elements natural height isn't enough, you can add some padding!

  4. Remove the br element, it's not needed and it actually has a different meaning and use case. If you wanna add space, you can use padding or margin! ^^

  I hope I was able to help a bit, if you got any questions, ask away ^^

  Marked as helpful

  1

  ---

  

  Pedro Verde•60

  @verdepedroPosted over 2 years ago

  Hi @FluffyKas ! Thank you for all the input, is very useful! I will try to adapt the page to learn how to implement this. Have a wonderful day!

  0