Responsive order summary card using CSS display Grid. HTML and SCSS.

Community feedback

• 

  Lucas 👾•104,340

  @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 helpful

  0

  ---

  

  Abodunde OluwaTobiloba•90

  @OhTobilobaPosted over 2 years ago

  Hello @correlucas . Thanks so much for giving into this. You have got me up and running! The changes worked out fine.

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @OhTobiloba you`re welcome Ohtobiloba!

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @OhTobiloba you`re welcome Ohtobiloba!

  1