The Web Blinders logo

Programming
☰

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>
HTML
Copy

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>
HTML
Copy

For live demo - Visit this CodePen

Need developers ?

if so, send a message.

thewebblinders@gmail.com

More Programming from our blog

SEARCH FOR ARTICLES