QR Code Component Solution Using Flexbox & BEM

Community feedback

• 

  P

  Øystein Håberg•13,260

  @Islandstone89

  Posted 12 months ago

  Hey, well done!

  A few tips :)

  HTML:

  • The card heading would likely not be the main heading on a page, hence I would change it to a <h2>.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • I would move the properties on .container to body.

  • Remove the width and height on the card. It is not recommended to set fixed sizes in px, as we want our components to respond to different screens.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

  • I would place font-family on the body, and remove it elsewhere. The children of the body will inherit the font.

  10

  Marked as helpful