Responsive QR-code card ,styled with CSS .

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hello, SlavenaDuhneva! 👋

  Make the <img> as a block element and set max-width: 100%. It makes the image elements responsive (not overflowing).

  Alternative text of the image should be used to describe the image. In this case, it is a QR code that will navigate the users to https://www.frontendmentor.io/. So, the alternative text should have that information.

  Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

  Resources about alternative text:

  • Quick tip: Using alt text properly - The A11Y Project
  • Avoid these common alt-text mistakes - Scope for business
  • Contextually Marking up accessible images and SVGs
  • Images Tutorial | Web Accessibility Initiative (WAI) | W3C
  • How to write better alt-text descriptions for accessibility - Scope for business

  I hope this helps. Happy coding! 😄

  Marked as helpful

  0

  ---

  

  SlavenaDuhneva•80

  @SlavenaDuhnevaPosted almost 2 years ago

  @vanzasetia Thank you so much for your advice about the <img> tag !

  1