Design comparison
Solution retrospective
I have done many mistakes in this project like I am unable to put the annual plan next to the image, can't add more space between my items, if you find some more mistakes please provide me feedback your feedback helps me a lot.
thank you
Community feedback
- @BMcdavittPosted about 2 years ago
Hi GRAVIT,
Another suggestion to help you center the card would be to set the body height to 100vh. This will allow you to set the display to flex and align-items to center:
height: 100vh; display: flex; justify-content: center; align-items: center;
Now you can remove the margins from .card and everything will center perfectly in all displays.
Happy coding!
Marked as helpful1 - @correlucasPosted about 2 years ago
👾Hello GRAVIT, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Your background is applied but its not too similar to the design yet. Add
background-size: contain
instead ofbackground-size: cover
to make it display the size full width and center with the card vertically. Note that now is slightly different from the challenge design.body { background-image: url(./pattern-background-desktop.svg); background-repeat: no-repeat; background-size: contain; background-color: var(--pale-blue); }
✌️ I hope this helps you and 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