Design comparison
Solution retrospective
Updated:
I sorted out the vertical centering using just flex. I'll probably switch to @0xAbdulKhalid's grid solution though.
I also got rid of my media queries by just using min() in my max-width.
I was in the middle of trying to dial in the exact card dimensions when I discovered there was a screenshot/month limit.
Orignal:
I had trouble automatically centering the card vertically using grid. In the end I just settled for getting the top margin to 8vh.
I am unsure of if I handled the media queries and responsiveness in an optimal fashion. I suspect I could have used clamp to simplify some things. Perhaps min or max as well.
I wasn't sure what to do for the slight drop shadow on the card. I did my best to eyeball it.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS 🎨:
- let me explain, How you can easily center the component.
- We don't need to use
margin
andpadding
to center the component both horizontally & vertically. Because usingmargin
orpadding
will not dynamical centers our component at all states
- To properly center the component in the page, you should use
Flexbox
orGrid
layout. You can read more about centering in CSS here 📚.
- For this demonstration we use css
Grid
to center the component
body { min-height: 100vh; display: grid; place-items: center; }
- Now remove these styles, after removing you can able to see the changes
body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; grid-template-areas: "content", "footer"; } .card { grid-area: "content"; margin-top: 16vh; margin-left: auto; margin-right: auto }
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1@nattyricePosted over 1 year ago@0xAbdulKhalid
Thanks for the help! I had actually just got done working out how to get the flex to work on my own. Yeah, I had a lot of things I'd tried while I was throwing things at the wall to see what stuck. As you'd noticed, some of it was getting in my way. I think I like your grid/place-items recommendation more.
0 - @xedsonruizxPosted over 1 year ago
Hi i have some corrections for you, I am not an English speaker so If you dont understand something send me an email to [email protected], I will try to help you.
- body size 100 just add to your css code
body { height: 100%; }
How to make body and html 100 heght
- Center vertical card
there is some ways to center a card in the middle of the page this is what I used code example and playground
with this you can delete the top margin top from media query. I hope this will help you.
Marked as helpful1@nattyricePosted over 1 year ago@xedsonruizx Thanks! I went with
min-height: 100vh
that your link recommended.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