@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
marginorpadding.
- We don't need to use
marginandpaddingto center the component both horizontally & vertically. Because usingmarginorpaddingwill not dynamical centers our component at all states
- To properly center the component in the page, you should use
FlexboxorGridlayout. You can read more about centering in CSS here 📚.
- For this demonstration we use css
Gridto 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 {
margin: 5%;
}
@media (min-width: 576px)
.wrapper {
margin: 0 auto;
}
- 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
@thycupxo
Posted
Hi @0xAbdulKhalid! Thanks for your feedback once again. 😁
@media (min-width: 576px)
.wrapper {
margin: 0 auto;
}
I came across a couple of posts suggesting using margin: 0 auto to center div. Now that I know it's better to use Flexbox or Grid to do that. I wonder in which case would we use margin: 0 auto? Seems like it's a pretty common practice to center div.
Also, looking at the screenshot comparison above and checking on my main laptop screen, seems like my containers are huge compared to the example. It displays perfectly sized on my external monitors but on my laptop it's huge. Do you have any suggestions on how I should fix this? I'd like to have them sized to fit the screen.
Please let me know! Appreciate your help here :)
@0xabdulkhaliq
Posted
Glad to receive further questions from you @thycupxo!
- "I wonder in which case would we use
margin: 0 auto? Seems like it's a pretty common practice to center div", Yeah it can be used in some minor cases like if you want to center the component only horizontally. For example you may need to use it on landing pages like the testimonial sections, about us sections etc.
- But for the current trend every developers just pretend to use Flex or Grid for that, because they both have so much of control in layout
- "looking at the screenshot comparison above and checking on my main laptop screen, seems like my containers are huge compared to the example", Yeah you're right this is why we need to develop a well responsive site which can perform best in all screen sizes
- I don't know about the screen size of your monitors, because each of them has their own sizes according to their resolution configuration. But i surely know that the Screenshot's are generated for a HD Moniter which means the resolution will be approximately around
1440x900.
- So you want to focus on perfect placement at screenshot then you need to build the site in Browser's RWD Mode. Go ahead to dev console on your prefered browser and select RWD Mode then choose the laptop size configuration
.
That's all i need to say about your doubts, Hope am cleared it too!
