Responsive QR code component built with HTML and CSS.

Community feedback

• 

  P

  Kamran Kiani•2,700

  @kaamiikPosted 2 months ago

  Some few notes:

  1. Do not use words like image or picture inside your alt text. It's obvious that screen reader describing the image. You can read more about how to add a good alt text here: https://www.craigabbott.co.uk/blog/how-to-write-good-alt-text-for-screen-readers/

  ---

  2. Consider that in a real world scenario this card is part of the bigger page and you should not use h1 tag here.

  ---

  3. Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.

  ---

  4. Do not change the html tag font-size on CSS. this is not a good practice and cause serious problems. read this article about it: https://fedmentor.dev/posts/rem-html-font-size-hack/ After a while Its easy to convert. use your font-size in the body and always use it with rem unit.

  ---

  5. No need to have width: 100%; inside your main.

  ---

  6. Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width inside your .qr-code-card because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.

  ---

  7. Your image only needs max-width: 100%; and display: block;

  ---

  8. No need to have width: 80%;.

  ---

  Marked as helpful

  0
• 

  Damian Kurzydlo•60

  @dayu420Posted 2 months ago

  Thank you for your feedback. I truly appreciate the time and effort you took to review my project, and I will carefully consider your suggestions.

  0