order summary component

Community feedback

• 

  Juan Pablo Davalos•190

  @jpdavalos423Posted 5 months ago

  Hey Munib! Great work on this challenge. As for adding a border radius to only the top corners of the image consider this example:

  border-radius: 20px 20px 0px 0px;
  

  The border-radius property in this example uses 4 arguments each representing a different corner. The arguments start at the top-left corner and follow clockwise. Be sure to adjust the numbers accordingly in order to fit your implementation.

  Marked as helpful

  1
• 

  Shoaib Shuja•560

  @ShoaibShujaPosted 5 months ago

  Your live site is showing an error and is not loading.

  But you can add a background image by using these lines of code:

  body {
      background-image: url("./assets/images/yourImageFile.png");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
  }
  

  Note this that you have to type your image file's name where I wrote yourImageFile.png.

  Marked as helpful

  0
• 

  Shoaib Shuja•560

  @ShoaibShujaPosted 5 months ago

  And one more thing if you want to put a container in the middle of the web page remove the container's margin and put these lines of code in your css stylesheet:

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 100vh;
  }
  

  0

  ---

  

  Munib ahmad•190

  @MunibAhmad-devPosted 5 months ago

  Thank you very much for your help! Actually, I used all the properties except background-repeat, so the image shows 2-3 times. But indeed, you helped a lot. Thanks again!

  One more thing: for centering the main div, should I center it by targeting the body element directly?@ShoaibShuja

  1

  

  Shoaib Shuja•560

  @ShoaibShujaPosted 5 months ago

  Yes, my friend.

  1