Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hi Aijalon Bode, congrats on completing this challenge!
I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code:
Your component is okay but its missing the vertical alignment. The best way to do it is by using
flexbox
. First step is to addmin-height: 100vh
to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body and then use the flex properties for alignment withdisplay: flex
/align-items: center;
/justify-content: center;
body { background-color: var(--btn-white); position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
To make your CSS code easier to work you can create a
single class
to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.✌️ I hope this helps you and happy coding!
0@capitolcomputersPosted about 2 years ago@correlucas thanks for the kind feedback. I do appreciate it. I'll work on improving just that.
However, can you give me an example of the second feedback.
Not sure I do understand how you mean, so a more explanation with perhaps an example would help me understand better.
Would love to see an example of a single class managing the paddings, margin and colors.
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