Design comparison
Solution retrospective
Glad to share my card with you.
I know it is not perfect as I had just few time to design it yesterday evening. Especially the size is very far from the solution as I had no access to figma or sketch file (I took free option).
Happy to hear some advice from you.
I was coding before going to bed for fun.
Community feedback
- @danielmrz-devPosted 11 months ago
Hello @ExploryKod!
Your solution looks excellent!
I have just one suggestion:
- Use
main
to wrap the main content instead ofmain
andarticle
.
š The tag
article
would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
Marked as helpful1@ExploryKodPosted 5 months ago@danielmrz-dev Thank you for your advice, indeed there is no need of section or article tags as this is a card left alone without any other context.
1 - Use
- @BlackpachamamePosted 11 months ago
Greetings! you have done a great job š
š Some suggestions
- You can use the
calc
function on yourmin-height
. From your100vh
you can subtract the height of yourfooter
so that this vertical scroll is not caused. This would look like:min-height: calc(100vh - 11px)
- You can add a
margin-inline
in yourlayout__card
so that the card is not stuck to the edges on mobile screens - I leave you the task of researching the
box-sizing: border-box
Marked as helpful1@ExploryKodPosted 5 months agoThanks @Blackpachamame š.
Indeed these rules are lacking, thank for helping me improve the solution.
1 - You can use the
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