Order preview card

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello David Boluwatife, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  1.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  2.Your background is applied but it's 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.Here’s the code with the modification and the image applied as background:

  body {
      background-color: hsl(225, 100%, 94%);
      background-image: url(../images/pattern-background-mobile.svg);
      /* background-position: center; */
      background-repeat: no-repeat;
      background-size: contain;
      display: flex;
      font-family: 'Red Hat Display';
      justify-content: center;
      align-items: center;
      padding-top: 2rem;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, David! 👋

  The "Repository URL" is navigating to your GitHub profile instead of to the repository for this project. I recommend updating the URL with the URL to the repository of this project.

  For the background image, it might be helpful if see how other people implement it. You can see my solution and browse other people's solutions to see how they handle the background image.

  Another suggestion is to avoid using br elements for presentational purposes. Read what MDN documentation says about it. Use either padding or margin to create a whitespace.

  Hope this helps!

  Marked as helpful

  0
• 

  Fathul Irfaan Abdillah•320

  @thefathdevPosted about 2 years ago

  Hey David, great job for completing the challenge!

  Here's what I think you can do to fix the background :

  1. change background-image: url("pattern-background-desktop.svg"); in styles.css to background-image: url("../images/pattern-background-desktop.svg"); and don't forget to move your pattern-background-desktop.svg to the images folder
  2. add css property min-height: 100vh in the body selector, so your background will fill the entire view

  hope this helpful! happy coding✨

  Marked as helpful

  0

  ---

  

  David Boluwatife•150

  @GIT-GizmoPosted about 2 years ago

  @whatTheFath Thanks bro!, that did the trick

  1

  

  Fathul Irfaan Abdillah•320

  @thefathdevPosted about 2 years ago

  @GIT-Gizmo You're welcome, bro. I've ever had the same problem actually 😅

  0
• 

  Benjamin Nicholas Wells•230

  @BenjaminNicholasWellsPosted about 2 years ago

  Hey David, I'm 90% confident I know why the image isn't loading; I think the relative path you have set for the image url in your css file is trying to find the svg file in the folder of the css file rather than the root folder. Try moving the svg file into the same folder as where the css file or altering the url path to go into the root directory by putting a forward slash in front of the url.

  0

  ---

  

  David Boluwatife•150

  @GIT-GizmoPosted about 2 years ago

  @BenjaminNicholasWells I have tried it but it still didn't work sadly

  0