A mobile responsive QR code built using HTML and CSS Flexbox.

Community feedback

• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Your solutions looks great, both on mobile and desktop! Congrats on completing the challenge successfully.

  Few feedback regarding the code:

  i think the flex-flow column-wrap has no effect for this div you can remove that:

  .max-width-container { display: flex; justify-content: center; align-items: center; flex-flow: column wrap; <-------- min-height: 100%; }

  Regarding this:

  figure { height: 288px; width: 288px; margin: 0; margin-top: -6px; }

  it is because you have set a fixed height for the wrapper and then display: flex; justify-content: center; align-items: center;

  this made it calculate item's positioning based on the available space in height and width and distributed evenly. To have those spaces evenly around it, instead of giving a fixed height to it, you can give a padding to the whole wrapper, so it has even paddings on all sides, the height must come automatically from its children's own height. One example:

  for the content-wrapper: width: min-content; padding: 20px;

  instead of fixed height and widths.

  Hope you find this helpful!

  Marked as helpful

  0
• 

  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.

  HTML 🏷️:

  • Your solution generates accessibility error reports due to non-semantic markup

  ---

  • So fix it by replacing the <div class="max-width-container"> with semantic element <main> and <div class="attribution"> with semantic element <footer> to improve accessibility and organization of your page.

  ---

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

  Happy coding!

  Marked as helpful

  0