qr code component using CSS

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello again Cristina! Congratulations for your new solution!

  Your solution is just perfect, I saw that is super responsive and all elements are fluid when the container starts to contract.

  There's a little issue when the media query gets activated, note that you don't need media query here, since your component is already full responsive.

  For some reason the padding you've added for the media query is forcing the alignment left for the container, you can fix it just deleting the media query below:

  @media only screen and (max-width: 19em)
  main {
      /* padding: 1.5rem; */
  }
  

  Instead, to avoid the container touching the screen bounds add this margin:

  main {  margin: 24px; }
  

  Hope it helps and keep it up, this a really good solution!

  Marked as helpful

  0

  ---

  

  Cristina Kelly•140

  @cristinakellytPosted about 2 years ago

  @correlucas Hey Lucas! Thank you for your feedback! It really makes more sense, I'll change this!

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hey Cristina, congratulations on completing the challenge! You did a very great work 😉

  Some little tips for optimizing your code:

  • you can use article tag for the card container instead of div to improve the Accessibility
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of texts
  • remove height and width from body because they are superfluous
  • use min-height: 100vh instead of height to main tag

  Great! You use relative units of measurement like rem

  Hope this help! Happy coding 😁

  Marked as helpful

  0

  ---

  

  Cristina Kelly•140

  @cristinakellytPosted about 2 years ago

  @denielden Hi Deniel :) Thank you for your feedback and tips! I have really let those things pass but it won't happen again!

  1