Code QR Component with HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

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

  CSS 🎨:

  • To prevent your component from becoming too wide on larger screens, consider adding max-width: 320px (or 20rem) to your CSS. This ensures your component will not exceed a certain width

  • Great start with the CSS! To center the content properly and make your layout more flexible, consider using min-height: 100vh instead of height: 600px. This way, your content will adjust to fit the screen height regardless of the device.

  • Additionally, add align-items: center; to your body styles. This will vertically center the content within the flex container.

  Code:

  body {
    . . .
    ‎ display: flex;
    ‎ justify-content: center;
    ‎ /* height: 600px; */
    ‎ align-items: center;
    ‎ min-height: 100vh;
  }
  
  article {
    ‎ ...
    ‎ /*margin-top: 40px; */
    ‎ /*margin-right: 40%; */
    ‎ /*margin-left: 40%; */
    ‎ /* width: auto; */
    ‎ height: 500px;
    ‎ max-width: 20rem;
  }
  

  CSS Reset 🔄:

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1