QR code component solution using flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 🏷️:

  • The <br> tag is often used to create line breaks, but it doesn't convey any semantic meaning. When a screen-reader reads the text, it will break the flow of reading at the line break tag, which can be confusing for users.

  CSS 🎨:

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

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

  • Do not use overflow: hidden on the body element, this will prevent scrolling on some devices. ⚠️

  • In this challenge, a media query is not necessary. If you want to create a responsive component, use max-width instead of width, add some margin and remove its height. Let the content determine the height of the component.

    .kartu {
        /* position: relative; */
        /* height: 600px; */
        /* width: 400px; */
        max-width: 400px;
        margin: 1rem;
    }
    
    @media screen and (max-width: 720px) {
      .kartu {
        /* width: 90%; */
        /* height: 550px; */
      }
    }
    

  • In the image, it is not necessary to use a height or flex. When using width: 100%, the height adjusts automatically

    .kartu > img {
        /* flex: 2; */
        border-radius: 15px;
        /* height: 100%; */
        width: 100%;
    }
    
    @media screen and (max-width: 720px) {
      .kartu > img {
        /* height: inherit; */
      }
    }
    

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

  Happy coding!

  Marked as helpful

  2

  ---

  

  LuckyPort•100

  @LuckyPortPosted over 1 year ago

  @MelvinAguilar Thank you for the suggestion i really appreciate it was really help full. I'll applying your suggestion on another challenge ☺️

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  HEADINGS ⚠️:

  ---

  • And, This solution generates accessibility error reports due to lack of level-one heading <h1>

  ---

  • Every site must want at least one h1 element identifying and describing the main content of the page.

  ---

  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

  ---

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  LuckyPort•100

  @LuckyPortPosted over 1 year ago

  @0xAbdulKhalid Thank you for the suggestion looking forward to apply this in next challenges thank you :)

  0