responsive order summary design using Html, Css

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="container"> with the main tag, <div class="title"> with <h1> and <div class="description"> with <p> to fix the accessibility issues. click here for more on web-accessibility and semantic html

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  To center .box on the page using flexbox or grid, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .container on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  There is no need to five . box a box-shadow.

  Increase the max-width of .box for it to be equivalent to the width of the design. max-width: 400px.

  You forgot to give the body a background-image with a background-size of contain and a background-repeat of no-repeat.

  This challenge requires a media query, in the media query change the background-image of the body.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0

  ---

  

  Mohamad Mourad•190

  @MouradisPosted over 1 year ago

  @Hassiai thanks for your reply first thanks for clarifying how to center the container with flexbox i didnt knew i could do it if i added min-height second i havent used media because i used % width and it was working on mobile there was no need for it last to be honest i copied the border box from the internet because i dont know how to do them myself

  0

  

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  @Mouradis The border-box subtracts the left and right padding values from the width of an element instead of adding the padding values to the to the width of the element.

  0
• 

  Santiago Moraga Caldera•710

  @Remy349Posted over 1 year ago

  Hi @Mouradis, I like the final result of your project, it is very well done, just some tips for you to take into consideration for future projects:

  1.If you want to center an element you can do it very easily using Flex, what you did is fine, in the end we are different and we have different thoughts and ideas, but I want to show you this way to do it if you didn't know it yet:

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

  With these simple lines you can center an HTML element, I applied it in the body as it is very practical and there is only one HTML element that you want to center, but in general it will depend on what you want to center and also the amount of elements to center.

  2.Note that you did not put the background image that the project should have, in order to do this there are different ways to do it, I will show you one that will be related to the portion of code that I left you in the first tip:

  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
  body::before {
    content: '';
    position: absolute;
    background-image: url(Your image here!);
    width: 100%;
    // This value may vary, it will depend on you
    height: 100%;
    // You can use this for the image position,
    // these values will depend on you
    top: 0;
    left: 0;
    // This is another way, these values will depend on you
    background-position: top 0 left 0;
    z-index: -10;
    // From time to time you will find it necessary to use the following values,
    // so that the image is not distorted
    background-size: Here you can use cover or contain, there are more;
    background-repeat: Here you can use no-repeat, there are more;
  }
  

  This should be enough to add the background image, but as I said, there are many ways to achieve the same result, this is one.

  I recommend you to investigate more about these concepts, specially the pseudoelements (::before, ::after, .....), also try to find other ways to do the same, it will help you to improve a lot and to know different ways to solve these problems.

  I hope my advice will be helpful for your future projects, keep on learning web development :)

  0