@correlucas
Posted
Hello OhTobiloba, congratulations for your challenge solution!
Answering your question about the background issue you can fix it with two properties: background-size: cover; background-position: top; background-size cover make the background fit inside the container in this case the body. I wrote you also some things you can apply to center properly the card:
body { display: flex; font-size: 16px; font-family: "Red Hat Display", sans-serif; text-align: center; height: 100vh; background-image: url(/images/pattern-background-desktop.svg); background-repeat: no-repeat; background-size: cover; background-position: top; background-color: #e0e8ff; align-items: center; justify-content: center; flex-direction: column; }
Added properties:
display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh;
Removed properties:
/* margin: 0px; */ /* padding: 0px; */ /* max-width: 1440px; */
See if works now, and don't forget to change the background for mobile using a media query and doing the import of mobile image.
I hope it helps you bro!
Marked as helpful
