QR component using CSS Flexbox and Google Fonts

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Using display: flex; is a very common way to center elements. Another alternative is to use the grid layout.

    body {
      display: grid;
      min-height: 100vh;
      place-items: center;
    }
    

    Another way to center an element is using display: absolute but it may introduce issues on smaller devices. The component might overflow or cause layout problems.

    If you choose to use margin: auto; for centering, keep in mind that it won't center vertically, only. For vertical centering, you can use flexbox with margin: auto:

    body {
      display: flex;
      min-height: 100vh;
    }
    
    .item {
       margin: auto;
    }
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  Rico98•10

  @CesarQD98Posted about 1 year ago

  Hey @MelvinAguilar thanks for the feedback!

  I'll have a check on grid as an alternative for centering. On the other hand, I find margin a viable solution for, let's say modals; the kind of messages that covers all the screen.

  Anyway, thanks again and happy coding!

  0