@correlucas
Posted
👾Hello Matheus Saggiorato, Congratulations on completing this challenge!
Here's two tips for you:
To improve the card overall responsibility, you can start to add flex-wrap
inside the class that manage the section for the rating numbers button
and make the adjust to fit in different rows while the container scales down, not that without this property the container doesn't shrink. Here's the code applying these changes:
.buttons-group {
justify-content: center;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
Fix the alignment of the whole content using flex
and min-height
to manage the vertical alignment and make everything centered.First of all put min-height: 100vh
to the body
to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size and display: flex
e flex-direction: column
to align the child element (the container) vertically using the body as reference.
body {
min-height: 100vh;
background-color: hsl(216, 12%, 8%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
✌️ I hope this helps you and happy coding!
Marked as helpful