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
@BMcdavitt
Posted
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 helpful
@correlucas
Posted
👾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 of background-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 helpful
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
