Design comparison
SolutionDesign
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Betelhem, congratulations for your new solution!
Your solution design is just great, now all you miss is the alignment. See my tips below:
You need to replace the
max-width: 350px;
taking this property from body to the card, because otherwise the body will not make the container align, see the alignment fix below:body { display: flex; /* max-width: 375px; */ background-color: var(--color-lightgray); padding-top: 60px; padding-bottom: 60px; flex-direction: column; align-items: center; justify-content: center; .box { max-width: 350px; background-color: var(--color-white); border-radius: 20px; padding: 20px 20px 40px 20px; font-family: var(--font-family), sans-serif; font-size: var(--font-size); text-align: center; } }
π I hope this helps you and happy coding!
Marked as helpful0 - @Illyaas4ShowPosted about 2 years ago
This is quite a nice solution. Just a few small issues:
Document should have one main landmark
- Your page should have one and only one<main>
tag to help screen readers navigate the page.You can wrap your '.box' in a main tag.- You should also put the attribution in a footer tag for the same reason.
- Try to increase the padding for the p tag to make it more identical to the design. You can also reduce the width of the card for the same reason
Hope this helps, Happy coding!
Marked as helpful0
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