@Islandstone89
Posted
HTML:
- Do not use "image" or "photo" in the alt text. Screen readers start announcing images with "image", so an alt text of "QR image" would be read like this: "image, QR image". The alt text must also say where it leads(frontendmentor.io).
CSS:
-
It's good practice to include a CSS Reset at the top.
-
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
Remove
width
onbody
, andwidth
andheight
on the card and the image. -
On the
body
, changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. -
Add a
max-width
of around20rem
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. -
On the image, add
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container.
Marked as helpful