QR Code Component Challenge, using Flexbox

Community feedback

• Account deletedPosted over 1 year ago

  @dweemon, good job on completing the challenge. It would be a good idea and great practice to play around with sr-only for accessibility purposes it's essentially for screen readers, you've already done it by putting text on you image using the alt tag. You can do a very simple one using the h1 tag element simply give it a class name of sr-only then put this code in your css:

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: hidden;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  

  this won't be seen on screen but will be read out loud to people who are blind or have other disabilities that are using screen readers.

  10
• 

  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.

  • Wrap the page's whole main content in the <main> tag.

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  I hope you find it useful! 😄

  Happy coding!

  10
• 

  Dilhan Boca•220

  @dboca93

  Posted over 1 year ago

  Hello @dweemon,

  Congratulations on submitting this task. Instead of playing around with position and then amending the margin, it would be easier to use a main inside the body element (that has the rest of the code in it) with the following code:

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

  This might be easier, especially going into the future, I remember not finding out about viewport units quiet late, this will hopefully make it much easier for you !

  10