Mobile-first solution using HTML/SASS/CSS

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26

  Posted about 3 years ago

  Hi DkP!

  I would recommend you to eliminate the margin in the div with the class .card because it is not a good way to center an element, because at the end it is not centered vertically for all type of screen only for the one you occupy, so to the body you can add the following:

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

  With this you center it both vertically and horizontally and set a minimum height so that it is always centered in the middle vertically.

  This is the only thing I can recommend, if you can generate a new report after you have made the changes written in the previous comment so that you do not get any errors in the report.

  Good Coding!

  00

  Marked as helpful
• 

  Ahmed Bayoumi•6,680

  @Bayoumi-dev

  Posted about 3 years ago

  **Hey!**Congratulations on completing this challenge... You have some accessibility issues that need to fix.

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <div  class="container">
        //...
     </div >
  </main>
  

  • Page should contain a level-one heading, Change h2 to h1 You should always have one h1 per page of the document.
  • All page content should be contained by landmarks, Contain the attribution with <footer>.

  <footer>
     <div class="attribution">
        //...
     </div>
  </footer>
  

  I hope this is useful to you... Keep coding👍

  00

  Marked as helpful
• 

  Abdul•8,560

  @Samadeen

  Posted about 3 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="card"> instead of <div class="card">.
  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
  • You can wrap your attribution section in a footer tag to avoid accessibility issues.

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  00