Mobile and Desktop view of Summary Order PAge

Community feedback

• Account deleted

  Hi there! 👋 Congratulations on successfully completing the challenge! 🎉

  I noticed a few areas where you can improve your code to make it more accessible and organized. In your HTML, you can replace the <div class="container"> element with the semantic <main> element to create landmarks for your webpage. Landmarks are an essential part of creating a structure that helps convey the purpose of your page, and non-semantic markup can generate accessibility error reports.

  Regarding CSS, I suggest that instead of using margin and padding to center your components, you should use Flexbox or Grid layout. Using margin or padding might not dynamically center your component at all states. The code snippet I recommend is to use css Grid:

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  
  .wrapper {
      margin: 0 auto;
  }
  

  I hope these suggestions will help you improve your code, and please let me know if you have any questions. Keep up the great work, and happy coding! 😄

  Marked as helpful

  0

  ---

  

  kingchoffy•80

  @kingchoffyPosted over 1 year ago

  @ktra99 hello thanks for your feedback it was helpful and i have made the changes it looks better overall now

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which lack landmark for a webpage

  ---

  • So fix it by replacing the <div class="container"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>

  ---

  • They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

  ---

  CSS 🎨:

  • let me explain, How you can easily center the component.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  .wrapper {
    margin: 0 auto;
  }
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  kingchoffy•80

  @kingchoffyPosted over 1 year ago

  @0xAbdulKhalid hey thank you so much for your suggestions it was helpful and it looks alot better now thanks to you. although i like my content centered from top to bottom so i made it margin-top:1em; is there a better way to this ?

  0