@correlucas
Posted
👾Hello @MXalman, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
Fix the alignment. The best way make this alignment is by using FLEXBOX
. The first step, is to add min-height: 100vh
to make the body height size becomes 100% of the viewport height, this way you make sure the container will be aligned vertically since the body
will display ever 100% of the screen height. After that add two flex properties to make the alignment display: flex
/ align-items: center;
/ justify-content: center;
. If you're using the attribution you need to add flex-direction: column
to make the attribution stays under the QR Code component. See the code below:
body {
background: hsl(217, 54%, 11%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
REMOVE THE MARGIN:
.container {
position: relative;
width: 300px;
height: 500px;
/* margin: auto; */
background: hsl(216, 50%, 16%);
border-radius: 10px;
margin-top: 100px;
box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
✌️ I hope this helps you and happy coding!
Marked as helpful
@MXalman
Posted
@correlucas Thank you for the suggestions.