QR code component using flexbox with RWD

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 2 months ago

  Hey, good job!

  After looking at your code, these are my suggestions - I hope you find them helpful.

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change .container to a <main>, and have the <h1> inside of the main.

  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.

  • Remove the styles on .container, it doesn't need any styles.

  • Remove the margin on the card.

  • Instead, add align-items: center on the body. I would also add gap: 1rem so the main and footer don't squeeze against each other.

  • Remove the width and height in px on the card. We rarely want to give a component a fixed size, as we want it to grow and shrink according to the screen size.

  • We do want to limit the width of the card, so it doesn't get too wide on larger screens. Give the card a max-width of around 20rem to solve this issue.

  • 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.

  • letter-spacing must also never be in px. You can use em, where 1em equals the element's font size.

  • You don't have to declare those font weights - headings have font-weight: 700 as the default, and paragraphs have font-weight: 400.

  • On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

  Marked as helpful

  0

  ---

  

  yahappylemon•170

  @yahappylemonPosted 2 months ago

  @Islandstone89 Thank you for the detailed feedback! It not only helped me revisit the basic knowledge of CSS, but also refined my work!

  1
• 

  camilo cuartas•100

  @camilo-cloudPosted 2 months ago

  Nice done!

  0