Responsive qr code component using mobile first workflow

Community feedback

• 

  Kacper Kwinta•1,405

  @kacperkwinta

  Posted over 3 years ago

  Some tips:

  • Try to avoid static height, because on small screens text in box just overflow in bottom
  • Page should contain a level-one heading

  11

  Marked as helpful
• 

  Rio Cantre•9,650

  @RioCantre

  Posted over 3 years ago

  Hello there! Nice work with this project! Looking at your solution, I think you should considered the following as well...

  • Import the attribution style in the CSS file and remove style tag
  • Include description to the alt in img tag and should not be empty
  • Wrap the attribution with specific tag like footer for readability
  • Alternative way to set size on the image is to create a rule set that includes the tag property for example...

  HTML:
  <div class="img">
            <img src="./images/image-qr-code.png" alt="" class="qr" />
  </div>
  
  CSS:
  .img img.qr {
       width:100%
  }
  
  

  The issue would be you wrap the img first with .img class then add another class within the img... the width would not be distinguish properly.

  Hope this helps and Keep it going!

  10

  Marked as helpful
• Account deletedPosted over 3 years ago

  Hi there 👋

  Congratulate on finishing your project 🎉. The design looks beautiful 😃.

  I will try to answer your question and hope it helps you. Img tag is not a strictly inline element, it's a replaced-inline element. Because <img> is an inline tag, that is replaced by its own source file (well, it's still an inline element). See these links for more information MDN

  Happy coding ☕

  10

  Marked as helpful
• 

  sanket kumar•300

  @sanketcharanpahadi

  Posted over 3 years ago

  Thank you for resolving my issue.

  00