Lucas 👾• 104,420
@correlucas
Posted
👾Hello Maksim, Congratulations on completing this challenge!
Make the vertical alignment using flex properties and min-height. 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 thats 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;
margin: 0;
padding: 0;
background-color: var(--Main-BG);
font-family: 'Outfit';
font-weight: 400;
color: var(--Soft-blue);
display: flex;
align-items: center;
justify-content: center;
}
To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.
@media (max-width: 350px) {
.card-body-info {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1.6em;
border-bottom: 2px solid var(--Line);
flex-direction: column;
}
}
✌️ I hope this helps you and happy coding!
0
