@geomydas
Posted
Hi, your solution looks great but here are some issues I found in your design and code.
- The container is not centered vertically. #jumbotron is only vertically with margin: auto. What I would reccomend is to use Flexbox on the parent element (which is the body in this situation) and add the following lines of code to it { display: flex; align-items: center; justify-content: center; min-height: 100vh}
You would use display: flex in order to use the second and third elements in the example. It would also enable CSS Flexbox. If you haven't learned it already, go learn it!. It makes challenges like these easier.
Align-items center the element vertically by default but it can also center it horizontally ( we won't dive through that ), and justify-content centers the element horizontally by default (just like margin: 0 auto)
Min-height: 100vh is just 100 of the viewport height but you could do this with any other unit (px, rem, em) and you need to set a height to the parent element to use align-items: center;.
- CSS Reset is not used.
A css reset is basically a list of css code that makes your code look the same at MOST browsers (fuck you Internet Explorer). I'd reccomend using this https://www.joshwcomeau.com/css/custom-css-reset/ or https://piccalil.li/blog/a-more-modern-css-reset/.
Other: Resources for learning box model; https://www.youtube.com/watch?v=rIO5326FgPE (video) https://www.theodinproject.com/lessons/foundations-the-box-model#the-box-model (written)
Marked as helpful
@peechidi
Posted
@geomydas Thank you so much. This means a lot to mean. I would check this up and make the necessary adjustment locally on my device and see how it works. Thank you, once more.
