Responsive QR code with Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,080

  @MelvinAguilarPosted about 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  Alt text 📷:

  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

    If you want to learn more about the alt attribute, you can read this article. 📘.

  CSS 🎨:

  • The width: 100vw property in the #wrapper tag is not necessary. This will create a horizontal scrollbar on some devices.

  • Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport.

  • 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.

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

  Happy coding!

  Marked as helpful

  1
• 

  Hassia Issah•50,530

  @HassiaiPosted about 2 years ago

  <footer class="attribution"> should be out of the main tag.

  There is no need to style #wrapper. To center the main on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center the main on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center  the main on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  For a responsive content which wont require a media query for this challenge, give the main a fixed max-width value . max-width: 320px.

  This challenge does not require a box-shadow.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0