@Islandstone89
Posted
HTML:
-
Every webpage needs a
<main>
that wraps all of the content, except for<header>
andfooter>
. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. I would change.box
into a<main>
, and delete the.wrapper
, as you don't need any wrapping divs. -
The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).
CSS:
-
It's good practice to include a CSS Reset at the top.
-
To center the card horizontally and vertically, use Flexbox on the body:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
-
Remove the fixed width on the card. Except for icons, you rarely want to set fixed dimensions(especially heights), as this easily creates issues with responsiveness.
-
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
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. -
Add
display: block
andmax-width: 100%
on the image - the max-width prevents it from overflowing its container.
Marked as helpful