QR Code Component, CSS, HTML

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @blue-crona 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I like this solution for the challenge. Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further:

  • You need just 2 more properties to center with flexbox

  Using flexbox layout:

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

  Another option is to use grid layout:

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

  Links with 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).

  .

  Here are some other suggestions:

  • Use margin: 0.625rem or margin: 10px in the content-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

  3

  ---

  

  Ben•160

  @blue-cronaPosted about 2 years ago

  Hi @MelvinAguilar, Thank you for the awesome feedback.

  I've implemented your suggestions of positioning the content using flexbox and adding some space on mobile devices. 👍

  0
• 

  Hassan Mourad•50

  @Mourad3rdPosted about 2 years ago

  Github this is how I did it you did a better than me over all great job 😊❤

  0

  ---

  

  Ben•160

  @blue-cronaPosted about 2 years ago

  @Mourad3rd ❤️Thank you!

  0