The Right way of doing CSS Full Screen Landing Page with Centered Content
I have seen many landing pages, whose layout disrupts when browser window is resized. You will see a work around for this in the article.
(Wrong way) Generally ,This is how you do a full screen landing page.
<div class="landingPage">
<div>CONTENT</div>
</div>
<style>
.landingPage {
margin: 0 auto 0 auto;
width: 100%;
height: 100vh;
/* For centering content */
display: flex;
align-items: center;
justify-content: center;
}
</style>By using above code, you will get full screen landing page but it is not dynamic or fluid, whenever browser window is resized , the layout disrupts.
(Right way) Add and Set min-height to 100%,so when browser window is resized, the layout won't disrupt.
<div class="landingPage">
<div>CONTENT</div>
</div>
<style>
.landingPage {
margin: 0 auto 0 auto;
width: 100%;
min-height: 100vh;
/* For centering content */
display: flex;
align-items: center;
justify-content: center;
}
</style>For live demo - Visit this CodePen