Results Page with Flexbox and a Little Grid

Solution retrospective
I am proud of the card being centered at all screen sizes. This has been a big struggle for me but I figured it out with this code.
.main {
display: flex;
margin: auto;
inset: 0;
justify-content: center;
align-items: center;
height: 100vh;
}
What challenges did you encounter, and how did you overcome them?
I couldn't get the icons to align vertically with the rest of the elements despite using align-items: center;
for each list element.
The main challenge was getting everything in the right place and to be the right size to match the design. I had to keep comparing it side by side to the design to make sure I got it right.
Centering the card itself was a challenge, a bunch of the solutions I found online didn't work but I found one that did.
What specific areas of your project would you like help with?Any feedback is much appreciated! If you have any suggestions on how I could organize my CSS or write less of it, I'd love to hear it.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Julianna Messineo's solution.
Join 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