Design comparison
Solution retrospective
product preview
Community feedback
- @Islandstone89Posted 9 months ago
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. Change.container
to a<main>
. -
To show different versions of the image depending on the screen size, you should use the
<picture>
element. Remember to include a short and descriptive alt text.
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. -
max-width
should be in rem. -
On
.container
, removewidth
,height
andmargin
. -
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: 100svh;
-
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. -
letter-spacing
must also never be inpx
. You can useem
. -
Media queries must be in rem, and it is common to do mobile styles as the default.
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord