@AkoToSiJeromeEh
Posted
Hi there! Great work out there! I noticed that the 3 column preview card 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 3 column preview card. . I hope this suggestion helps and works for you. Happy coding!
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 15px;
font-family: 'Lexend Deca';
font-weight: 400;
background: var(--very-light-gray);
display: flex; // add this
align-items: center; // add this
justify-content: center; // add this
min-height: 100vh; // add this
}
Marked as helpful
@CharlieDW
Posted
Hi @AkoToSiJeromeEh , thanks for the feedback! I will indeed have a look at this. I ended up adding a <main> tag, so will need to work on a different solution for the vertical alignment :)
@CharlieDW
Posted
Hi @AkoToSiJeromeEh, so I ended up doing the old "centering" with absolute position:
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
