QR Code solution (HTML, CSS Flexbox)

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 🏷️:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  CSS 🎨:

  • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 320px or 20rem to make sure that the component will have a maximum width of 320px on any device, also remove the width property with a percentage value.

  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!

  00

  Marked as helpful
• 

  Sajana Wijesinghe•460

  @StormKing969

  Posted over 1 year ago

  For the best coding practice, I'd take a look at this link and as for the issue about the space between the top text and bottom one, you'll have to make the margin of the first text to be 0 instead of none or something like this

  .container > .header{
      margin-bottom: 0px;
  }
  

  00

  Marked as helpful