Design comparison
Solution retrospective
Centering the Component was quiet difficult, I couldn't get it to be centered the veiwport automatically so I had to do it manually.
What are the best practices of centering items especially divs?
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @KelvinMvungi ๐, good job for completing this challenge and welcome to the Frontend Mentor Community! ๐
There are two modern CSS techniques to center elements:
Using flexbox layout:
body { width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
Using grid layout:
body { width: 100%; min-height: 100vh; display: grid; place-content: center; }
And remove
margin: auto;
andmargin-top: 100px;
from thediv
selector.More information:
- The Complete Guide to Centering in CSS
- A Complete Guide to Flexbox (CSS-Tricks)
- How TO - Center Elements Vertically (W3Schools) |
- CSS Layout - Horizontal & Vertical Align (W3Schools).
Tips:
- Try to use semantic tags in your code. More information here:
With semantic tags:
<body> <main> . . . </main> <body>
Good Job and happy coding !
Marked as helpful2@KelvinMvungiPosted about 2 years ago@MelvinAguilar Thanks for the feedback. I also had a doubt in using semantic tags in small projects like this, but you cleared my doubt as it is the best practice.
1 - @correlucasPosted about 2 years ago
๐พHi , congratulations on your solution!๐ Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw youโre on the right track. Iโve few suggestions for you that you can consider adding to your code:
Your preview site its not displaying yet, first of all you need to configure the Github Page and update your solution inserting the new link.
My suggestion for your is to use
vercel
ornetlify
since Github Pages its kinda tricky to configure. But if you really want to use Github Pages you can try to follow this guide to use it and fix the settings for your pagehttps://docs.github.com/en/pages/quickstart
.In case you choose
netlify.com
orvercel.com
, in a matter of 5 minutes your preview site is online. All you need to do is to connect the Github account, import the repository and deploy it. Fixing that you've to update the solution with the new link and we'll be able to see your live site and help you.โ๏ธ I hope this helps you and happy coding!
Marked as helpful0@KelvinMvungiPosted about 2 years ago@correlucas Thank you so much Lucas. I went with vercel and let me say, for the first impressions it seems faster than Github pages. Please check the links again as I'm posting them right now, also please feel free to check my next challenge and say a thing or two of how you see it.
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