Responsive QR Code Component Solution

Community feedback

• 

  Francisco Carrillo•5,540

  @frank-itachiPosted over 1 year ago

  Hello there 👋. You did a good job!

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

  HTML 📄:

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

  • If your code has different sections that have a specific purpose like articles , sections or footer, it’s a good practice to enclose those parts with HTML5 semantic tags. For example, you could use a <footer> tag to wrap a footer section.

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

  Happy <coding /> 😎!

  Marked as helpful

  1

  ---

  

  Jason Campbell•10

  @jcampbell18Posted over 1 year ago

  @frank-itachi Thank you so much Francisco! That made total sense, and it cleaned up the warnings as well. I appreciate your feedback on this!

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  The solution looks much better now, I just have a few small suggestions.

  • "could I have made it without even using a media query..?" - Yes, Even now there is no div with class qr-container, so the media query does not apply. If you want to prevent it from touching the edges of the screen, add a small margin to the component and remove its width: 100%.

    * {
         box-sizing: border-box;  /* see next note*/
    }
    
    main {
        /* width: 100%; */
        max-width: 300px;
        margin: 15px; /* Convert to em :) */
        . . .
    }
    

  • You should use the box-sizing: border-box property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here 📘.

    You have used max-width: 300px, but if you inspect the element, it measures 332px, you have not taken into account the padding and the border.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

    screenshot-imgur (landscape mode)📸

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  0

  ---

  

  Jason Campbell•10

  @jcampbell18Posted over 1 year ago

  @MelvinAguilar Wow! Melvin, I appreciate your recommendations, and education references. I'll be honest, I had never come across box-sizing until you said something. Thanks again!

  0
• 

  JesnerW•210

  @JesnerWPosted over 1 year ago

  Hello there 👋. You did a good job!

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

  Try to have a better look to have a more accurate solution, the width of the container is about 295px.

  Marked as helpful

  0