@AkoToSiJeromeEh
Posted
Hi there! Great work out there! I noticed that the QR Card component is not vertically aligned, and I recommend adding CSS properties to the body or specific element , such as d-flex and its related properties. Additionally, it's important to include min-height or height for proper alignment. By adding this to the body properties, you can achieve centering of the QR Card component. . I hope this suggestion helps and works for you. Happy coding!
body {
background-color: hsl(212, 45%, 89%);
min-height: 100vh; // add this
display: flex; // add this
align-items: center; // add this
justify-content: center; // add this
flex-direction: column; // add this
}
.container {
width: 273px;
align-content: center;
margin: auto; // you can remove this
text-align: center;
padding: 15px;
margin-top: 200px; // you can remove this
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 100%);
border-radius: 10px;
}
Marked as helpful
@marlar-tz
Posted
Thank you for your helpful suggestion. I truly appreciate your input and will certainly explore it. @AkoToSiJeromeEh
@AkoToSiJeromeEh
Posted
@marlar-tz welcome i hope suggestion helps
Marked as helpful
@marlar-tz
Posted
Wow .It really helps .Thanks again @AkoToSiJeromeEh