Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I wouldn't do anything differently, except if what I made was wrong.
What challenges did you encounter, and how did you overcome them?No challenges.
What specific areas of your project would you like help with?Layouting the CSS probably
Community feedback
- @mkborisPosted 3 months ago
Nice work AndreChips, here are a few things to review
- All content should be wrapped within landmarks. Wrap a
main
tag around .card-container - It's not good practice to wrap every element in
div
because divs aren't semantic. The .card-title should be a Heading element. Every page should have at least one heading typically anh1
element to provide a clear structure. The other texts should be paragraph elementsp
. - Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
- Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset.
- Media queries should be defined in
rem
not px - Avoid setting fixed
heights
andwidths
on elements, as this can create problems with responsiveness and content fit. Instead, let the content andpadding
determine the element’s size. If necessary, usemax-width
ormin-height
, and prefer relative units likerem
for better adaptability. Change thewidth
of the .card-container tomax-width
and it should be defined inrem
. Also remove theheight
completely and usepadding
within the container to give it some room.
Hope this helps
Marked as helpful0 - All content should be wrapped within landmarks. Wrap 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