Simple responsive page with css flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Betelhem, congratulations for your new solution!

  Your solution design is just great, now all you miss is the alignment. See my tips below:

  You need to replace the max-width: 350px; taking this property from body to the card, because otherwise the body will not make the container align, see the alignment fix below:

  body {
      display: flex;
      /* max-width: 375px; */
      background-color: var(--color-lightgray);
      padding-top: 60px;
      padding-bottom: 60px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  
  .box {
      max-width: 350px;
      background-color: var(--color-white);
      border-radius: 20px;
      padding: 20px 20px 40px 20px;
      font-family: var(--font-family), sans-serif;
      font-size: var(--font-size);
      text-align: center;
  }
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  This is quite a nice solution. Just a few small issues:

  • Document should have one main landmark - Your page should have one and only one <main> tag to help screen readers navigate the page.You can wrap your '.box' in a main tag.
  • You should also put the attribution in a footer tag for the same reason.
  • Try to increase the padding for the p tag to make it more identical to the design. You can also reduce the width of the card for the same reason

  Hope this helps, Happy coding!

  Marked as helpful

  0