Responsive page using HTML, CSS, CSS Flexbox

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @Taro2211 👋🏻

  I have some quick tips for the project.

  • First, let's bring the item to the center of the screen, here's how to do it:

  body {
      background-color: hsl(233, 47%, 7%);
      font-family: sans-serif, Arial;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  you already did the most part of it, all I had to do is to add min-height: 100vh; to give the body ability to grow if needed, so it did 🙃

  • Instead of giving fixed widths try to work with relative units, like percentage,

  main {
      width: 100%;
  }
  

  so I changed it to 100% to let the image grow more, so it doesn't look distorted and shrunk.

  • Lastly, for <p> tag in .content instead of padding-bottom: 30px; replace it with margin-bottom: 50px;. This will give it some white space and make it to look closer to the original design.

  I hope this was helpful 👨🏻‍💻 other than that, you did a great job for your second project, nicely done. Cheers 👾

  Marked as helpful

  1