Css Flex-box with HTML

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  HTML

  In order to fix the accessibility issues:

  • You need to replace <div class="container"> with the <main class="container"> tag and <div class="attribution"> with the <footer class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
  • Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you need to use a <h1> element in the <main> tag instead of using <h3>. You can replace your <h3>Improve your front-end skills by building projects</h3> element with the <h1>Improve your front-end skills by building projects</h1> element.

  CSS

  • If you want to center it easily, you can update your classes in CSS in this way:

  body {
    background-color: hsl(212, 45%, 89%);
    font-family: "Outfit", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  .container{
      max-width: 250px;   // max-width makes it responsive 
      padding: 16px;
      background-color: hsl(0, 0%, 100%);
      border-radius: 13px;
  }
  

  Hope I am helpful. :)

  Marked as helpful

  1

  ---

  

  Anei•30

  @aneimalienyPosted over 1 year ago

  @ecemgo Thank you so much, I am definitely doing it right now.

  1
• 

  Salomon (soloDev) Solomon•40

  @Solomon333Posted over 1 year ago

  Hey bro, to fix the landmark issue you should use a main tag instead of a div for the container and also use the footer tag for the attribution class. and always practice using h1 on the first element you can adjust the font size with CSS. for the footer just use position: fixed and give it 0 margins it will place the footer on the bottom of the page.

  hope it was helpful, if you need help just ask !!

  Marked as helpful

  1

  ---

  

  Anei•30

  @aneimalienyPosted over 1 year ago

  @Solomon333 The footer idea works so well and i just fixed it. Thank you!!

  1