QR code component solution

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @K-Muzslay 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

  Answering your question here are some suggestions to improve your code:

  There are two modern CSS techniques to center elements

  Using flexbox layout:

  body {
     width: 100%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
  }
  

  Using grid layout

  body {
     width: 100%;
     min-height: 100vh;
     display: grid;
     place-content: center;
  }
  

  More information:

  • The Complete Guide to Centering in CSS
  • A Complete Guide to Flexbox (CSS-Tricks)
  • How TO - Center Elements Vertically (W3Schools) |
  • CSS Layout - Horizontal & Vertical Align (W3Schools)

  And remove:

  main {
      /* margin: 0; */
      /* position: absolute; */
      /* top: 50%; */
      /* left: 50%; */
      /* -ms-transform: translate(-50%, -50%); */
      /* transform: translate(-50%, -50%); */
  }
  

  Another tips:

  • Use max-width: 360px to .container selector instead of width.
  • Use margin: 0.625rem or margin: 10px in the container selector so that it has some space when viewed on mobile devices.

  I hope those tips will help you.

  Good Job and happy coding !

  Marked as helpful

  1

  ---

  

  Kinga•150

  @K-MuzslayPosted about 2 years ago

  @MelvinAguilar Thank you so much! I was sure it can be solved with flexbox, I tried but I was not familiar with the "vh" relative unit. Now I'll keep it in mind.

  I haven't learnt grid yet, I will revisit this when I'm at it.

  Thank you for the extra tips too!

  1