Order Summary Page Challenge completed using HTML & CSS

Community feedback

• 

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  Hey odyg You did amazing work congratulations for completing this challenge

  to fix accessibility issues :

  • You should use <main class="container"> and wrap inside it <div class="container"> so all page content should be contained by landmarks.

  • give class name card instead div.container as page contain more than one element so it is not the container for all content in the page

  • You can wrap your <div class ="attribution"> in a footer tag like this <footer><div class="attribution"></div></footer> to avoid accessibility issues. and you can comment the footer tag to hide it

  To make your code more Responsive

  • instead of using margin in flex.container use this to center your elements in the page

  body {margin :0;display:flex;flex-direction:column; min-height:100vh}
  
  **/*it is a child of the body and we make flex-grow:1 to distribute space-equally in top and bottom*/**
  main{display:flex;place-items:center;place-content:center;flex-grow:1}
  
  **/*you can make it in this challenge to get identical design but don't make it in really site you work on as semantic layout should contain header,main,nav,footer,etc.*/ **
  footer{display:none;margin:0}
  

  • don't give section or div specific height that will damage the responsivity in mobile if width of screen small so remove height and use min-height instead .

  • you can use variables in css and save colors or fixed sizes in variables like this :

  :root 
  {
  --main-color:#3829e0;
  --font-family:'Red Hat Display',sans-serif;
  }
  
  h1 
  {
  font-family:var(--font-family)/*to call  value of the variable*/
  }
  

  Regardless You did amazing I hope this is useful to you... Keep coding👍

  Marked as helpful

  0