Responsive order summary card using CSS display Grid. HTML and SCSS.
Design comparison
Solution retrospective
An Updated solution. Learning is progressive! #Growth
Community feedback
- @correlucasPosted over 2 years ago
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 helpful0@OhTobilobaPosted over 2 years agoHello @correlucas . Thanks so much for giving into this. You have got me up and running! The changes worked out fine.
1
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