@0xabdulkhaliq
Posted
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 šØ:
- Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using
margin
orpadding
.
- 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, and also the important note is that you used mulitiple flex groups (almost 3) we don't need that much of level we can use flexbox for body only to center the component
- You already using
Flexbox
for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.
body {
min-height: 100vh;
}
- Now remove these styles, after removing you can able to see the changes
@media (min-width: 1200px)
section {
width: 28.6%;
margin: 195px 0 189px 0;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
section {
margin: 154px 0;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
- Now your component has been properly centered
.
I hope you find this helpful š Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@0xAbdulKhalid Hey Abdul! This worked perfectly when I took out the suggested code out of both sections and added the body {min-height: 100vh;}. Is it possible to explain what the vertical height is doing here? I know that display: flex is not inherited by the child elements of the body. At least it shouldn't be. Anyway thanks for helping me make my code a lot cleaner. Appreciate the tip!