Skip to content
OverviewSolutions
6
Comments
2
3kori
@3kori

All comments

  • 3kori•80
    @3koriPosted 7 months ago

    Hi @elishabhatti,

    Excellent work completing this project. It looks amazing!

    Just a suggestion to make it even better.

    Instead of using flex-box on the container, consider applying it on the body like below

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

    The min-height will help with centering the container vertically.

    0
  • MARCUS-IMPERATOR•90
    @MARCUS-IMPERATORSubmitted 7 months ago
    What specific areas of your project would you like help with?

    Thanks to @PedroP16's solution, I was able to solve the centering problem. It still needs some work, so if you have any suggestions to improve this, please do share.

    QR page using HTML and CSS

    1
    3kori•80
    @3koriPosted 7 months ago

    Hi @MARCUS-IMPERATOR,

    Congratulations on completing this project. It looks amazing!

    I'd like to offer some suggestions to improve the solution:

    • Set these global styles to avoid spacing and layout issues caused by browser default styles.
    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
    • Great job on using flexbox to center the container. Add min-height: 100vh; to the body to help with the centering.
    • To avoid squishing the container when changing screen sizes, consider using a high percentage for the container's width.
    media screen and (width: 750px)
.container {
    width: 95%;
}
    • Finally setting padding for the body isn't necessary.

    I hope you find this helpful!

    Marked as helpful
    1