QR code. Basic version using CSS and HTML

Community feedback

• 

  P

  Øystein Håberg•13,260

  @Islandstone89

  Posted over 1 year ago

  HTML:

  • The text in the footer must be wrapped in a <p>.

  CSS:

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

  • Remove the height on html.

  • Change height on body to min-height: 100vh.

  • box-sizing: border-box should be set on *.

  • body should not have a max-width.

  • Remove font-style: normal, as that is the default value.

  • The card must not have a fixed width. Instead, add a max-width of around 20rem - this prevents the card from getting too wide on larger screens.

  • As you have set box-sizing: border-box higher up in the DOM, it is already inherited by main - hence there is no need to declare box-sizing: inherit.

  • On the image, add display: block and replace width with max-width: 100% - the max-width prevents it from overflowing its container.

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

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

  • On the paragraph, remove font-family: 'Outfit', font-weight: 400 and font-style: normal. The font-family is inherited from the body, and the two other properties are default values of a paragraph. It should also not have a fixed width. To limit the length of the text, use padding-inline or a max-width of around 25ch.

  10

  Marked as helpful