Responsive QR code module

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you. 🤗

  In order to fix the accessibility issues:

  • You need to replace <div id="container"> with the <main id="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
  • Another issue is that your <img> tag should include alt ="" attribute.

  Hope I am helpful. :)

  Marked as helpful

  1
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there,

  Card looks pretty nice, so good job!

  • your method of centering is fine. The common method is to give min-height: 100vh or svh instead of height: 100% but it seems to work in this particular case.

  • However avoid giving fixed heights like height: 450px , height should be determined by the content container. Fixed heights can cause various issues. Just adjust the paddings/margins instead.

  • <div id="container"></div>, you can replace this with a <main> </main> for a better semantic HTML.

  • You don't need any fixed heights, widths for the image as well, simply give a max-width: 300px to the container instead, and width: 100%, then make image width: 100% as well, tweak it with paddings.

  Hope you find this feedback helpful!

  Marked as helpful

  1

  ---

  

  Ferdi Tondeur•100

  @ferditondeurPosted over 1 year ago

  @visualdenniss Thank you very much! I will keep these helpful insights in mind with future projects!

  1