Design comparison
Solution retrospective
I found it difficult to understand and grasp the concepts of flexbox that I used on this project. I believe this mainly because the name of the properties that flexbox use is kind of confusing for me. align-items align content justify-content justify items. Took me a while just to discover that Justifying items is just for the grid system and not for flexbox. After finishing this project I can say that I am a step closer to mastering flexbox.
Community feedback
- @LarryTheFatCatPosted about 2 years ago
Hey!
Was looking at your code, well done!
Background colour is off, but if you ever plan on using a bg that is not black, care to use https://convertingcolors.com/hsl-color-220_15_55.html?search=hsl(220,%2015%,%2055%)
this website can help you double check what colour is being used, good for me so i dont have to keep tyring with multiple colours, fix up the accessibility issues and you're good!
update:
You don't have to use flexbox, if you're just centering a card, you can use what I usually do if im editing a page with just 1 single card:
- { margin: 0; padding: 0; box-sizing: border-box; }
body { display: grid; place-items: center; height: 100vh; }
.card { display: grid; place-items: center; }
Marked as helpful0@neftonjinPosted about 2 years ago@TwoThreeTwo Hey, thank you for the feedback. I used flexbox because they say flexbox is better in a one-dimension layout. I don`t have much experience with grid and flexbox to be able to tell which and when to use but being a one-dimension layout I thought that flexbox is better suited for this project.
0
Please log in to post a comment
Log in with GitHub
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