@Toluwaa-o
Posted
Concerning your question, this should work:
body { max-width: 100vw; min-height: 100vh; display: grid; place-content: center; }
Max-width specifies the maximum width of the page and 100vw is a relative unit so it adapts to each device. Likewise min-height. It specifies the minimum width of the page. Setting it to 100vh means it will always take up the whole screen. VW means view width and VH means view height. For more info https://www.w3schools.com/cssref/css_units.php
You don't have to use the display grid/place content i used. But i suggested it because it takes less time to write and it has the same effect as using both justify-content & align items.
And lastly, I'd recommend adding padding to the container instead of adding it to each individual element in the container, that way they all align properly.
I hope these suggestions are helpful, let me know if you have any other question.
Marked as helpful
