QR code component solution using flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Congrats on completing your first challenge!🎊🍻

  Here are some suggestions to help improve your code:

  • The role="main" is not needed ❌ since you are already using the main element.

  • The following is not needed ❌;

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1

  ---

  

  Jordan Herrera Vera•490

  @jordanhevePosted almost 2 years ago

  @vcarames i didnt notice the containers flex code was unnecesary, thanks i updated my code :D

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @jordanheve

  Glad I could help! 😁

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Congratulations on completing your first challenge! You have done a great job and I can see you are on the right track.

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

  CSS 🎨:

  • The width: 100vw property in the body tag is not necessary. The body tag is a block element and it will take the full width of the page by default.

  • Using height: 100vh or height: calc(100vh - 1px); for the body element can cause problems with the layout of the page on smaller screens, such as in landscape view on a mobile device.

    On smaller screens, such as in landscape view on a mobile device, the height of the viewport may be less than the height of the content of the page. In this case, using height: 100vh for the body element will cause the content of the page to be hidden behind the body element.

    Here is an image of how it would look on a mobile device (taking into account the scroll): screencapture-jordanheve-github-io-qr-code-2023-01-11-21_19_05

    To avoid this problem, it is generally recommended to use min-height: 100vh instead of height: 100vh for the body element. This will ensure that the content of the page is always visible.

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  Jordan Herrera Vera•490

  @jordanhevePosted almost 2 years ago

  @MelvinAguilar it was really useful to improve my code, thanks! i didnt know that about the width and height

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @jordanheve You're welcome. :)

  0