QR code component responsive with flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

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

  Happy coding! 🎄**

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag to fix the accessibility issue.

  To center .card on the page, there is no need to for position: relative in .container replace that with display: flex and there is no need for position: absolute in .card

  give the img a max-width of 100% instead of a fixed width value.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful. HAPPY CODING

  Marked as helpful

  1
• 

  Michael Johnson•970

  @mikej321Posted almost 2 years ago

  Hello there and great job on your project!

  Some things that I may suggest to help you with your code.

  I would remove the width and height from your .container as we typically avoid hard-coding widths and heights into containers. Next, i'd remove the positions from your .container as well as the .card and .attribution. Once you do that, add this to the body.

  body { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; }

  This will turn the entire body into a flex, the flex-direction will move the attribution directly under the project as you'd want. Now align-items and justify-content axis are swapped due to the flex-direction being changed. The min-height is there to give justify-content something to work with as the Y-axis can't be changed without a height. Lastly, align-items: center and justify-content: center will center everything perfectly. I tend to do this frequently.

  Next, i'd remove the hard-coded height from .card and add padding: 1rem .3rem; this will simulate the hard-coded height that was set to the .card.

  Of course, the project doesn't have to be done this way but avoiding hard-coded heights and widths will definitely improve the responsiveness of your project. Something I learned from Kevin Powell...if a page has no CSS on it, it is fully responsive. If something isn't responsive, it's something that we did as a developer. This has definitely helped me to improve how I view responsiveness.

  I hope this helped and happy coding!!!

  Marked as helpful

  1