Simple and responsive QR code page with HTML and CSS

Community feedback

• 

  P

  Øystein Håberg•10,510

  @Islandstone89Posted 10 months ago

  HTML:

  • Don't use words like "image" or "photo" in the alt text. Screen readers start announcing images with "image", so an alt text of "QR code image" would be read like this: "image, QR code image". Also, the alt text must say where it leads(frontendmentor.io).

  • Footer text must be wrapped in a <p>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • Change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove max-width on body, it is not needed.

  • Add justify-content: center and align-items: center onbody to center the card horizontally and vertically.

  • Remove the margin on the card, it is not needed, as the centering in done as mentioned above.

  • max-width on the card should be in rem.

  • Remove the margin on the image, and change the max-width to 100%, so it doesn't spill out of its container. It is also common to give images a display: block.

  • Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

  Marked as helpful

  1

  ---

  

  Gabriel Bulhões Emerenciano•80

  @bulhoesgabrielPosted 10 months ago

  Thank you for the feedback! I'm gonna remember those tips in my next projects. @Islandstone89

  1