Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHi Kritika, congrats on completing this challenge!
Nice solution and nice code! I can see that you paid a lot of attention to your code/design. If you donβt mind Iβve some tips for you:
Fix the alignment of the whole content using
flex
andmin-height
to manage the vertical alignment and make everything centered.First of all putmin-height: 100vh
to thebody
to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.body { MIN-HEIGHT: 100VH; background-color: hsl(204, 43%, 93%); font-family: 'Karla', sans-serif; /* DISPLAY: FLEX; */ display: flex; align-items: center; justify-content: center; }
βοΈ I hope this helps you and happy coding!
Marked as helpful1 - @rezi-rezikoPosted about 2 years ago
hello, great job keep going!
I have some feedback for you my friend.
you can use flexbox for moving main box in the center,
make parent div display: flex; justify-content: center; and align-items: center; So your solution will move in center.
Marked as helpful1
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