Page with html, css flexbox.

Community feedback

• 

  Neil Kanakia•300

  @neilk17Posted about 2 years ago

  Hey Francisco, Congrats on completing this challenge and good job on making it responsive!

  I don't think you need the line 113 styles.css is required. Here's some other suggestions:

  • Accessibility: These are easy fixes such as using html landmarks (<header>, <main>, <footer>) instead of <div> tags to contain most of the content.
  • Flexbox: You can effectively center your content using css flexbox, by putting the code in a container and using

  display: flex;
  align-items: center;
  justify-content: center;
  

  Hope this helps, and let me know if you have any other questions.

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Francisco, Congratulations on completing this challenge!

  Here’s some tips to improve your component design:

  Your component is okay but its missing the vertical alignment. The best way to do it is by using flexbox. First step is to add min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body and then use the flex properties for alignment with display: flex / align-items: center; / justify-content: center;

  body {
      min-height: 100vh;
      margin: 0;
      background-color: hsl(30, 38%, 92%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  I saw that for some properties you’ve used rem and for others px. In this case it is better to use only one kind of unit to have a better organization for your code. relative units as rem or em that have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well. ✌️ I hope this helps you and happy coding!

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @Fran505,

  Congrats on completing challenge

  As @neilk17 mentioned you can use flexbox to position the card in the middle of the page. you can add the following rule to your CSS file.

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

  you need the min-height otherwise it won't be centered and the flex-direction: column is there to just make the card and attribute stack on top of each other.

  Hope this is helpful.

  0