Design comparison
SolutionDesign
Solution retrospective
I thought about using position absolute and relative to put the two divs on top of each other. In the end, I used customized CSS properties for this challenge and had difficulties centering the div.
my question is -
what is the best way to align two elements together and what is the best way to center them?
Community feedback
- @ecemgoPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you.
CSS
- If you apply these styles below, you can center it correctly. You need to only update your code in this way :)
body { background-color: #d6e2f0; font-family: "Outfit", sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
.content { background: #fff; padding: 16px; border-radius: 18px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); max-width: 300px; }
.attribution { position: fixed; bottom: 0; font-size: 11px; text-align: center; }
h1 { font-size: 20px; margin: 2rem 0; text-align: center; }
p { font-size: 15px; margin: 1rem 0 3rem 0; padding: 0 2rem; text-align: center; }
Hope I am helpful. :)
Marked as helpful0@Solomon333Posted over 1 year ago@ecemgo Thank you for the help!!
display flex made a big difference.1@ecemgoPosted over 1 year ago@Solomon333 Exactly! Flexbox is the big savior. :) By the way, I'm happy to help!
1
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