flexbox

Community feedback

• 

  DragonFireShield•140

  @DragonFireShieldPosted over 1 year ago

  You managed to center the card perfectly and it stays centered on all sizes, so good job.

  Instead of using margin: 0 auto; you can use the flexbox property align-items: center;.

  main {
      height: 100vh;;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  
  .secao {
      width: 250px;
      background-color: hsl(0, 0%, 100%);
      border-radius: 10px;
      padding: 15px 15px 30px;
  }
  

  In this case the main's flex-direction: column; can be left out because the default flex-direction: row; already allows us to center it with justify-content: center; and align-items: center;.

  This would give us:

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

  You can also decide to use grid:

  main {
      height: 100vh;;
      display: grid;
      place-items: center;
  }
  
  .secao {
      width: 250px;
      background-color: hsl(0, 0%, 100%);
      border-radius: 10px;
      padding: 15px 15px 30px;
  }
  

  Also, I think moving box-sizing and font-family would be an improvement, since we want them to apply to all our elements:

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Outfit', sans-serif;
  }
  

  I recommend checking out https://mastery.games/flexboxzombies/ and https://cssgridgarden.com/ to learn more about flexbox and grid!

  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.

  ---

  .

  iMAGES 📸:

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.

  ---

  • The alt attribute should explain its purpose.

  ---

  • E.g. alt="QR code to frontendmentor.io"

  ---

  .

  HEADINGS ⚠️:

  ---

  • This solution had generated accessibility error report due to lack of level-one heading <h1>

  ---

  • Every site must want at least one h1 element identifying and describing the main content of the page.

  ---

  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

  ---

  .

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

  Happy coding!

  0