Design comparison
Solution retrospective
the solution mostly matches the challenge.
What challenges did you encounter, and how did you overcome them?css was hard when i first started. I had to constantly read the docs.
What specific areas of your project would you like help with?none thanks
Community feedback
- @Islandstone89Posted 11 months ago
HTML:
- You need a
<main>
, this is important for accessibility. Themain>
can also be the card. I would remove all divs, as they are not needed..attribution
should be a<footer>
, and its text must 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.
-
Since all of the text is centered, you only need to set
text-align: center
on thebody
. -
Remove the fixed width. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.
-
Add
max-width: 20rem
on the card, so it doesn't get too wide on larger screens. -
Instead of using
margin
on the card, you can use Flexbox on the body:
display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh;
- On the image, remove
height
, it is not needed. Replacewidth
withmax-width: 100%
, and adddisplay: block
.
Marked as helpful1@marksusonPosted 11 months ago@Islandstone89 Awesome! Thanks for the helpful changes. I’ll review and update tomorrow!
1 - You need a
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