Qr code component solution

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted almost 2 years ago

  REPLY:

  • Qr code component .kds is oversized on mobile version

  RESOLVING THE ISSUE:

  • QR component is oversized on screens, which may cause frustation for users
  • Resolve this by a quick hack, add transform: scale(.9); on main component
  • And additionally add box shadows for the component .kds which improves the design

  .kds {
       box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  }
  

  MESSAGE:

  • If my answer helps you then providing an upvote will be very helpfull
  • I hope you learned a lot of stuffs during this project, congrats Sister

  GREETINGS:

  • Peace be upon you with god's mercy & blessings Sister..✨

  Marked as helpful

  1

  ---

  

  Ava Christine•20

  @avaChristinePosted almost 2 years ago

  @0xAbdulKhalid thank you for feedback, i will fix it soon.

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  replace <h3> with <h1> to fix the accessibility issue.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Give the img a max-width of 100% instead of a height value To center .kds on the page, there is no need for max-width, max-height, padding ,margin values and flex-direction-column in the main. Add justify-content: center to the main and replace height:97vh with min-height:100vh

  Give .kds a max-width value e.g: .kds {max-width:320px;}

  Hope am helpful Happy coding

  0