Design comparison
Solution retrospective
How to make the div be at the center of page, especially for top-bottom
What specific areas of your project would you like help with?How an intermediate+ web dev write their code to make it short and clean -- I've been unsure where to put @media
Community feedback
- @AkoToSiJeromeEhPosted 6 months ago
Hey ! Great work out there i see that you are using margin in order to center the div or the card component and when i check the body css properties you are correct declaring the display : flex and its related attribute however using justify-self : center its not gonna work as expected what you need to add is justify-content : center and it will properly aligned on center also you can add specific height to center it you can use vh or dvh ( height : 100dvh). thats all thankyouuu. happy coding !
.main { background-color: var(--White); width: 384px; border-radius: 20px; border: 1px solid black; box-shadow: 5px 5px; padding: 24px; margin: 80px;// you can remove this height: 100%; }
body { background-color: var(--Yellow); font-size: 16px; font-weight: 400; display: flex; flex-direction: column; justify-self: center; // remove this align-items: center; min-height: 100dvh; // add this justify-content: center;// add this }
Marked as helpful1@cie-cretPosted 6 months ago@AkoToSiJeromeEh Thank you so muchhh!! You've just saved my life 😭🙏 I was trying so many methods, but the min-height thing is a literally new thing for me. I'll keep that in mind. Thanks againn~
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord