Design comparison
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
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
- To properly center the component in the page, you should use
Flexbox
orGrid
layout. You can read more about centering in CSS here 📚.
- For this demonstration we use css
Grid
to 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 helpful0@thycupxoPosted over 1 year agoHi @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 usemargin: 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 :)
0@0xabdulkhaliqPosted over 1 year agoGlad 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!
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