QR code component solution

Community feedback

• 

  P

  Zsofia Dalnoki-Papp•210

  @dalnokiPosted over 2 years ago

  Hey @inkfromblood,

  Congrats on your first solution!

  About the px/rem debate: this article sums it up in great detail, and it helped me understand the best practices: https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

  I usually convert all of my px values to rems, except for the 1px values :)

  I hope it helps!

  Marked as helpful

  1

  ---

  

  Dan Bennett•60

  @inkfrombloodPosted over 2 years ago

  @dalnoki Thank you so much! That is very helpful.

  0
• 

  Mo•840

  @MohamedAridahPosted over 2 years ago

  Hello @inkfromblood, congratulation on submitting your first solution🎉👏.

  Yes giving the QR code image max-width: 100% is totally right since this will make the image to take the full width and never overflow it.

  I have also some notes for you:

  • use font-family: 'Outfit', sans-serif globally instead of redeclare every time:

  body {
      font-family: 'Outfit', sans-serif;
  }
  

  • instead of using <h2> heading level for the text you can just use <p> element since this text is not a heading. This will fix your Accessibility Issues

  • use <footer> instead of .attribution div it's more HTML Semantic. Also This will fix your Accessibility Issues

  • This challenge Doesn't has nay links so you can Remove styles of the <a> tag since it's useless.

  • you can see My solution for this challenge it may be helpful for you..!

  I hope this wasn't too long for you, hoping also it was useful😍.

  Goodbye and have a nice day.

  Keep coding🚀

  Marked as helpful

  0

  ---

  

  Dan Bennett•60

  @inkfrombloodPosted over 2 years ago

  @MohamedAridah Thank you so much! That was incredibly helpful and makes a ton of sense. I'll update the code with your suggestions! I really appreciate it!

  The .attribution div was provided by the project, and the anchor tags were referring to the links in the footer (not really part of the project, just me trying to make it all look nicer).

  0