Design comparison
Solution retrospective
Hello everyone! I would like to showcase my very first challenge here. I believe the result is faithful to the original. I had some issues with the font size. The prescribed 15px seemed a bit small to me, but it turned out that the 'container' div itself was larger than the original.
Community feedback
- @yozidstPosted 11 months ago
Hello,
Congrats and Great job on your 1st Challenge! 👍
I would recommend the following for laying out your content for the future. This way you won't have to center the container using margins or padding and the full height of the screen is utilized.
eg.
body { margin: 0; padding: 0; min-width: 100vw; min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Also, after setting your body's font size, you can make use of rem to scale the other differing components.
- This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px.
1@Islandstone89Posted 11 months ago@yozidst there is no need to set the
min-width
, as thebody
is 100% wide by default. Otherwise, good tips :)1 - @Islandstone89Posted 11 months ago
HTML:
-
You need a
<main>
, this is important for accessibility. In such a simple component, it can also be the card, so change.container
into a<main>
. -
The alt text also needs to say where it leads (frontendmentor.io).
-
.attribution
should be a<footer>
. -
Footer text needs to be wrapped in a
<p>
.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
Font-size must never be in px. Use rem instead.
-
Remove the fixed width and height. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.
-
Give the card a
max-width
of around 20rem, so it doesn't stretch too wide on bigger screens. -
On the image, add
display: block
and replacewidth
withmax-width
. -
Instead of using
margin
on the card itself, a more common way to center something in the middle is to use Flexbox on the parent of what you want to center. In this example, the parent of the card is thebody
:
display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh;
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