Flex direction reposnsive

Community feedback

• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 10 months ago

  Hello there 👋 @Alex-Gamarano.

  Good job on completing the challenge !

  Your project looks really good!

  I have a suggestion about your code that might interest you.

  There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

  Consider adding a min-height of 100vh to the body element so as to centralize your project.

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

  I hope this suggestion is useful for future projects.

  Other than that, great job!

  Happy coding.

  Marked as helpful

  2
• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 10 months ago

  HTML:

  • Since the icons are decorative, the alt text must be empty:alt="".

  • "Learn More" would navigate to another page, hence it is not a button but a link.

  • .attribution should be a <footer>, and its text must be wrapped in a <p>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • This article explains why you should not change the font size to 62.5%.

  • You don't need to set box-sizing: border-box on the .container and the .card, as both is inherited from the declaration set on all elements(*).

  • max-width on container should be in rem.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Media queries should also be in rem.

  Marked as helpful

  1