Order Summary, CSS and Flexbox

Community feedback

• 

  Abdul•8,560

  @Samadeen

  Posted over 3 years ago

  Hey!! Cheers 🥂 on completing this challenge.. . Here are my suggestions 1.You should use <main class="container"> instead of <div class="container">. 2. Go down orderly when you are using the headings h1 down to h2 down to h3 and so on. 3. You can wrap the attribution div in a footer tag..it improve accessibility

  . Regardless you did amazing.. Happy coding!!!

  11
• 

  Akhlak Hossain Jim•1,325

  @Akhlak-Hossain-Jim

  Posted over 3 years ago

  Hey Matt, I just reviewed your code and preview, great work so far, and here are some of my suggestions:

  • try to add some padding in the .main-space class.
  • instead of div in <div class="main-space"> try using main tag here.
  • instead of <div class="attribution">Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.Coded by <a href="#">Your Name Here</a>.</div> use <footer class="attribution">Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.Coded by <a href="#">Your Name Here</a>.</footer>.
  • try using CSS variables.

  Happy coding :)

  12
• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 3 years ago

  Hi Matt, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
  • to make it look as close to the design as possible add background-size: cover to html element and fix background: url(images/pattern-background-desktop.svg) top center no-repeat with no-repeat
  • use button element instead div tag for the Proceed to Payment button

  Overall you did well! Hope this help 😁

  11