QR component using HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @Ambe-Mbong-Nwi 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I have some suggestions you might consider to improve your code:

  Regarding your question:

  • Centering the element with position would make your element behave strangely on some mobile devices, "there's a chance the content will grow to overflow the parent". You can use flexbox or grid layout to center elements. You can read more about centering in CSS here:

  Using flexbox:

  body {
     /* max-width: 375px; Remove this*/
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  

  Using grid:

  body {
     /* max-width: 375px; Remove this*/
     min-height: 100vh;
     display: grid;
     place-content: center;
  }
  

  Here are some other suggestions:

  • Use the <main> tag to wrap all the main content in your solution instead of using <div> to improve the accessibility of the website.

  • The alternative text must not contain hyphens, underscores, or the words "image", "picture" or "photo", because the image tag already provides enough information that it is an image

  • To make alternative texts more worthwhile, add descriptive text to the alt attribute of the QR image to explain what the QR image does. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  2

  ---

  

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  @MelvinAguilar Thanks very much your solution was very helpful

  1
• 

  xpress-dev•120

  @xpress-devPosted almost 2 years ago

  You can set: body { display: flex; justify-content: center; align-items: center; }

  1

  ---

  

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  @xpress-dev Thank you

  0
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Looks nice 🙌🏻 If you want to remove the report issue try to replace your p tag with class first with the h1 tag

  0

  ---

  

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  @catherineisonline Thanks for the reply. I tried doing that and resubmitted but the errors still remain

  0

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @Ambe-Mbong-Nwi You need to click generate new report, in the reports section on this page, it's big red button

  0

  

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  @catherineisonline Thank you I actually did that but still no change. It might be something I'm missing.

  0

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  @Ambe-Mbong-Nwi that's strange 🤔

  0