Order summary component using css flexbox and media query

Community feedback

• 

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  Hey Emmanuel 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="order-summary-card"> so all page content should be contained by landmarks.

  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on . so use h1 instead h2 and change font-size if you want .

  • 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 and get more awesome view

  To make your code more Responsive

  • to make background-image responsive you should use this

   body{
      background-size: contain;
      background-repeat: no-repeat;
      }
  

  • use <a href="#"> cancel order</a> instead <div>cancel order </div> to make it more semantic.

  • don't use multiple <br> to make content line by line but give div.text width:80% as example and text-align:center.

  • it's recommendable to use <p></p> instead of using div.texts to make it more semantic for screen reader.

  • remove extra padding and margin from any tag using this :

  *{padding:0px;margin:0px}
  

  • 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*/
  }
  

  • you should follow style-guide to get more styled page

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

  Marked as helpful

  1

  ---

  

  Emmanuel Ilesanmi•130

  @Emmex19Posted over 2 years ago

  @zenab12 Thank you Zienab, this is really helpful

  0