Order summary component using HTML & CSS

Community feedback

• 

  EGWIM IKECHUKWU•630

  @iyke-ePosted over 2 years ago

  nice work Ralph your design is not in the center of the page to centralise you design you can use flexbox on the body to centralise something like body { display: flex; justify-content: center; align-item: center; }

  Marked as helpful

  0
• 

  Madiha Khan•420

  @madkn1311Posted over 2 years ago

  Hello Raph,

  The design of your card looks great. :)

  You need to include the following code in the body.

  body {
    background-image: url("../images/pattern-background-desktop.svg");
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  

  1. Since your css file is in a folder, you have to set the image path with ../ that states that the image is located in the folder one level up from the current folder.

  2. Using background-size: contain; makes the entire image fit to the background space.

  Marked as helpful

  0

  ---

  

  Ralph•130

  @RalphJnrPosted over 2 years ago

  @madkn1311 Thanks alot!!! It worked

  1
• 

  Luiza Uszacki•250

  @LuizaUszackiPosted over 2 years ago

  Hi, @RalphJnr.

  The background-image isn't showing because your "styles.css" is inside a folder. So, you have to add ../ at the beginning of your path (url) to go back a directory.

  The way you're doing it, it's trying to find a images/pattern-background-desktop.svg inside the folder "css".

  Marked as helpful

  0

  ---

  

  Ralph•130

  @RalphJnrPosted over 2 years ago

  @LuizaUszacki Thanks alot! It worked

  1